Javascript 如何在 React 应用程序中创建动态 Materialui 元素

发布于08月11日

当Reaction组件中的按钮被按下时，我正在try 创建一个动态MUI网格元素.当我try 创建let newGrid = document.createElement('Grid')时，它不像正常的div创建那样工作.

有什么建议吗？

当前代码片段:

return (
    <>
        <button onClick={addRow}>Add Row</button>
        <Grid container className='v-timeline-container'>
            <Grid xs={12} item className="v-timeline-item v-center v-border">
                <TextItems />
            </Grid>
        </Grid>

    </>
   
)

我试图动态实现的目标是:

return (
    <>
        <button onClick={addRow}>Add Row</button>
        <Grid container className='v-timeline-container'>
            <Grid xs={12} item className="v-timeline-item v-center v-border">
                <TextItems />
            </Grid>
            <Grid xs={12} item className="v-timeline-item v-center v-border">
                <TextItems />
            </Grid>
        </Grid>

    </>
   
)

推荐答案

React使用VDOM在内部跟踪内容，直接使用DOMAPI操作DOM被认为是危险的.你应该怎么做，就像这样.

function App(){
 // you probably want to track the text items in each row, 
 // so use an array of objects
 const [gridItems, setGridItems] = useState([]);

 // this function adds a new grid item
 const onClick = () => {
  setGridItems([...gridItems, {text: "new row", id: gridItems.length + 1}]);
 };

 return (
    <>
         <button onClick={onClick}>Add Row</button>
         <Grid container className='v-timeline-container'>
          {
            gridItems.map(item => (
             <Grid xs={12} item className="v-timeline-item v-center v-border">
                <TextItems>{item.text}</TextItems>
             </Grid>
            ))
          }
         </Grid>
    </>
 );
}