Передача состояний в качестве свойст дочерних компонентов
Вы видели множество примеров, которые передавали свойства дочерним элементам JSX и React-компонентам в предыдущих задачах. Вам может быть интересно, откуда берутся эти свойства. Общим примером является наличие компонента с состоянием, содержащего state важное для вашего приложения, которое затем отображается в дочерних компонентах. Вы хотите, чтобы эти компоненты имели доступ к некоторым частям этого state, которые передаются в качестве свойств. Например, возможно, у вас есть компонент App который отображает Navbar , среди других компонентов. В вашем App есть state, которое содержит много информации о пользователе, но Navbar нуждается только в доступе к имени пользователя, чтобы он мог отображать его. Вы передаете эту часть state компоненту Navbar в качестве свойства. Этот шаблон иллюстрирует некоторые важные парадигмы в Реакте. Первый - однонаправленный поток данных. Состояние течет в одном направлении вниз по дереву компонентов вашего приложения, от родительского компонента с состоянием до дочерних компонентов через их свойства. Дочерние компоненты получают только данные состояния, в которых они нуждаются. Во-вторых, сложные приложения с установленным состоянием могут быть разбиты на несколько или один компонент с состоянием. Остальные компоненты просто получают состояние от родителя как свойства и отображают пользовательский интерфейс из этого состояния. Он начинает создавать разделение, в котором управление состоянием обрабатывается в одной части кода и визуализации пользовательского интерфейса в другой. Этот принцип отделения логики состояния от логики пользовательского интерфейса является одним из ключевых принципов Реакта. Когда он используется правильно, он упрощает управление сложными приложениями с сохранением состояния.
Компонент MyApp выводит дочерний компонент Navbar. Передайте свойство name из состояния компонента MyApp в дочерний компонент Navbar, затем покажите name в теге h1 который является частью Navbar.