reactjs 如何在JSX之外的React中创建动态数量的元素？

xqkwcwgp 于 2022-12-26 发布在 React

关注(0)|答案(1)|浏览(151)

在一个电子React应用程序中，我运行了一个shell命令，输出是逐行接收的，我如何动态地创建元素并将其添加到DOM中？
我用这个方法是有效的，但是，有没有更好的方法呢？

import Titlebar from "./components/Titlebar/Titlebar"
import { useState } from "react"

let shellOutput = []
const [currentShellOutput, setCurrentShellOutput] = useState(shellOutput)
ElectronAPI.execShellCommands(["spicetify apply"])
ElectronAPI.receive("sendToRenderer/shell-output", (outputString) => {
    console.log(outputString)
    setCurrentShellOutput((value) => {
        return value.concat([outputString])
    })
})

export default function App() {
    return (
        <>
            <Titlebar></Titlebar>
            {currentShellOutput.map((output) => (
                <p className="terminal-output">{output}</p>
            ))}
        </>
    )
}

左右输出相同，我没有格式化，所以不关心它们

reactjs

来源：https://stackoverflow.com/questions/74903698/how-do-i-create-dynamic-number-of-elements-in-react-outside-of-jsx

1条答案

按热度按时间

wecizke31#

如果我没有理解错的话，spicetifyshell在完成工作后会打印shell-exited，那么为什么不创建一个数组，在后台填充数据，并在shell退出后才呈现给DOM呢？

const shellOutput = [];
ElectronAPI.execShellCommands(["spicetify apply"])
ElectronAPI.receive("sendToRenderer/shell-output", (outputString) => {
    if (outputString === 'shell-exited') {
        // update the state
        setCurrentShellOutput(shellOutput)
        return; // a return statement will exit the function
    }
    console.log(outputString)
    shellOutput.push(outputString);
})

赞(0）回复(0）举报 2022-12-26

我来回答

reactjs 如何在JSX之外的React中创建动态数量的元素？

1条答案

相关问题

热门标签

最新问答