使用 jsx 动态替换元素

Question

我有一个随时间更新的数组data.info，我正在尝试用另一个元素替换占位符渲染的元素。所以默认情况下app.js看起来像这样

return (
<Fragment>
{data.info.map((index) => {
return <Typography key={index} variant="h6" className={classes.title}>Demo</Typography>
})}
</Fragment>
)

我还有一个带有异步功能的钩子来订阅data.info.length.

useEffect(
() => {
if (!initialRender.current) {
if (data.info.length!==0) {
for (let i = data.info.length-iScrollAmount+1 ; i < data.info.length+1; i++) {
firstAsync(i)
}
}
} else {
initialRender.current = false
}
},
[data.info.length]
)
async function firstAsync(id) {
let promise = new Promise(() => {
setTimeout(() => console.log(document.getElementById(id)), 500)
});
}

通过document.getElementById()和id，我可以访问渲染的每个元素并对其进行更改。问题来了。

1. 我正在使用material-ui所以我无法<Typography/>，因为它已转换为<h6/>。可能这不是问题，因为我需要替换内容，所以我可以找到parent元素并删除所有子元素。这样对吗？

2. 删除子项后，如何使用jsx添加内容？我的意思是，在异步函数中，我将得到一个要在新元素中使用的数组，<NewCard/>动态放入<Fragment/>。然而，我没有找到任何如何做到这一点的例子。

Answer 1

React 不鼓励直接操作 HTML DOM 节点的做法。

基本上你需要看到两件事。

1. State这是一个特殊变量，其值在后续刷新时保留。此变量中引用的更改将触发组件及其子项刷新/重新渲染。
2. 传递给每个Component的Props是只读的。默认情况下，更改 props 会导致组件刷新。

在您的示例中，根据要呈现Typography组件data.info。

溶液

1. 首先是您的地图功能不正确。map函数的第一个参数是列表项，第二个参数是索引。如果您不确定info是否总是存在于data中，您可能还需要进行空检查。

{(data.info || []).map((info, index) => { return <Typography key={index} variant="h6" className={classes.title}>{info.text}</Typography> })}

2. 您应该将info从map传递到Typography组件。或者在Typography的内容中使用info值，如上所示。
3. 更新data.info，Typography将自动更新。为此，请确保data.info是组件状态，而不是普通变量。类似的东西

const [data, setData] = React.useState({});

当你的值为data时(假设来自 API(，那么

setData(responseApi);

Answer 2

直接在 React 中更改DOM Nodes不是一个好习惯，你需要让 React 为你做渲染，你只需要告诉 React 该怎么做。

在这种情况下，您需要为data定义一个 ReactState，并在firstAsync函数中设置state，然后使用state渲染您想要的任何 html 元素或 React 组件