Функциональный компонент React не обновляется внутри родительского функционального компонента

Question

Для справки у меня есть эта ссылка на StackBlitz . Вы можете проверить, что вывод там не работает.

У меня есть один компонент TodoList Line Item, и я хочу визуализировать компонент LineItem внутри компонента TodoListLineItem. Я использую реакцию с функциональными компонентами и перехватчиками с помощью машинописного текста.

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

Как показано выше, когда я пытаюсь поместить компонент <LineItem /> внутри <TodoListLineItem> , тогда компонент LineItem не отображается внутри родительского элемента компонент.

Мой вопрос в том, как визуализировать компонент LineItem внутри родительского компонента TodoListLineItem?

Answer 1

Компонент

LineItem является потомком компонента TodoListLineItem. Вам необходимо отобразить компонент LineItem внутри компонента TodoListLineItem, чтобы отобразить компонент LineItem.

Когда вы вкладываете такой компонент, как LineItem, вложенный в компонент TodoListLineItem, этот вложенный компонент передается в качестве опоры для окружающего компонента и доступен внутри окружающего компонента с помощью свойства children объекта props.

props.children будет массивом, содержащим все дочерние компоненты компонента TodoListLineItem . Вы можете визуализировать всех дочерних элементов 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

Вы можете узнать о props.children в React Docs - Composition vs Inheritance