反应功能组件不在父功能组件内重新渲染

Question

作为参考，我有这个StackBlitz Link 。 您可以检查 output 那里没有工作。

我有一个TodoList Line Item组件，我想在TodoListLineItem组件内呈现LineItem组件。 我正在使用 typescript 与功能组件和挂钩做出反应。

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

如上所示，当我尝试将<LineItem />组件放在<TodoListLineItem>内时，LineItem 组件不会在父组件内呈现。

我的问题是如何在父 TodoListLineItem 组件内渲染 LineItem 组件？

Answer 1

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

当您将LineItem之类的组件嵌套在TodoListLineItem组件中时，该嵌套组件将作为 prop 传递给周围组件，并且可以使用props object 上的children属性在周围组件内部访问。

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

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>
   );
}

演示

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

你可以在React Docs - Composition vs Inheritance上了解props.children