React功能组件未在父功能组件内部重新调用

Question

为了参考，我有这个StackBlitz链接。你可以在那里检查输出是否工作。

我有一个TodoList Line Item组件，我想在TodoListLineItem组件内部呈现LineItem组件。我正在使用带有功能组件的react和带有typescript的hook。

<div className="container">
<TodoForm />
<TodoListLineItem>
<LineItem />
</TodoListLineItem>
</div>

如上所示，当我试图将<LineItem />组件放在<TodoListLineItem>内部时，LineItem组件没有在父组件内部渲染。

我的问题是如何在父TodoListLineItem组件内部呈现LineItem组件？

Answer 1

LineItem组件是TodoListLineItem组件的子组件。您需要在TodoListLineItem组件中渲染LineItem组件才能渲染LineItem组件。

当嵌套类似LineItem的组件嵌套在TodoListLineItem组件内时，该嵌套组件将作为道具传递给周围组件，并且可以使用props对象的children属性在周围组件内访问。

props.children将是一个包含的所有子组件的数组CCD_ 16组件。您可以通过在TodoListLineItem组件中渲染props.children来渲染TodoListLineItem的所有子级

const TodoListLineItem: React.FC = (props) =>{
const [close, setClose] = useState(false);
return (
<div>
<label className="line-item-header"> All Todo List items </label>
{ props.children }       {/* render all the children of TodoListLineItem */}
</div>
);
}

Demo

https://stackblitz.com/edit/react-ts-asvv7x

您可以在React Docs上了解props.children-合成与继承