在 React 中，是否允许多次使用 props.children 元素?

Question

例如，如果子项始终是顶部的<h3>：

<h3> ... </h3>
<div>other content</div>

在父组件中，是否可以使用

return (
{ props.children } 
... other content
{ props.children[0] } 
);

这是显示两次props.children[0]，或者出于任何原因，显示两次props.children。 允许吗？ 似乎 DOM 会指向props.children[0]两次，但我在 Chrome 开发人员工具中检查了<h3> ... </h3>的两个 DOM 元素是不同的。

Answer 1

当然。props只是一个对象，所以你可以像普通对象一样使用它(但正如你已经知道的，不要改变它。

此外，即使props.children[0]在render()中出现两次，它们也会以不同的方式转换为 DOM。因为当 JSX 转换为 Fiber 时，每个 JSX 都将独立转换(并且将转换为 DOM(。所以两个 DOM 是不同的。