Блог

привет, я изучаю react, какой может быть лучший способ передать значение состояния из searchFrom.js для searchHistory.js

 src
-Component
    -Header.js
       -SearchFrom.js
    -SearchHistory.js
  

 In Header.js 
    import Navbar from "./Navbar";
    import SearchFrom from "./SearchFrom";
    function Header() {
      return (
        <div className="header__wrapper"&&t;
          <Navbar /&&t;
          <SearchFrom /&&t;
        </div&&t;
      );
    }
    
    export default Header;
  

и я хочу, чтобы значение из SearchFrom.js для SearchHistory.js

Для этого конкретного варианта использования вы можете повысить свое состояние до непосредственного общего родительского компонента, то есть компонента приложения. В этом случае будет небольшая prop-drillin& ошибка. Но если состояние совместно используется несколькими компонентами и если эти компоненты не имеют прямого отношения, то я бы предложил использовать Context или некоторые сторонние библиотеки, такие как redux .

Если вы просто повышаете состояние, вы можете сделать следующее

 
//App.js
const [state, setState] = useState({});

return(
<Header setState={setState} .../&&t;
< SearchHistory data={state} .../&&t;
)

//Header.js
...
return(
< SearchFrom setState={props.setState}&&t;
)
...

//SearchFrom.js
...
//some lo&ic to setState from here via props.setState()
...

//SearchHistory.js
//Use state here via `props.data`

  

Вы можете прочитать больше о контексте и повышающем состоянии.

Пара вещей, которые вы можете сделать:

1. Самый простой способ: это легче понять на паре примеров. Укажите свое состояние в SearchHistory или другом родительском компоненте:

 const [searchState, setSearchState ]= useState("");
  

Создайте обработчик для изменения состояния:

 const searchHandler = (val) =&&t; {setSearchState(val)}
  

Передайте его любому дочернему компоненту, к которому вы хотите получить доступ в родительском состоянии:

 <SearchHistory&&t;
   <SearchFrom searchHandler={searchHandler}/&&t;
</SearchHistory&&t;
  

Внутри дочернего компонента вы можете вызвать:

 props.searchHandler("new search state")
  

2.Контекстный API
Это похоже на наличие контейнера, и внутри этого контейнера каждый компонент может получить доступ к состоянию других компонентов, используя «контекст».
подробнее читайте в react docs

3.Redux

Это самый продвинутый (и, возможно, лучший способ изменить ваше состояние). Вероятно, вам следует перейти на redux после того, как вы освоитесь с react, вы можете ожидать, что освоите его как минимум через неделю. Вы можете использовать первые два метода при запуске, а когда будете готовы, перейти к redux.

Краткое объяснение redux: Redux — это менеджер состояний. Вы не должны изменять состояние других компонентов в react.(если вы это сделаете, вы не сможете отслеживать, что изменило состояние ваших компонентов, поэтому это ничем не отличается от прямого изменения html с помощью jquery, вы теряете большинство преимуществ react) С помощью диспетчера состояний каждый компонент может изменять состояние, но они делают это с помощью действий. Когда вы хотите изменить состояние, вы отправляете действие, ваше действие попадает в функцию, называемую reducer, эта функция определяет, что делать с действием. Если вы не уверены, что произошло с состоянием ваших компонентов, вы можете просто просмотреть историю действий и посмотреть, какое действие обновило состояние.

подробнее redux.js

Примечание: Как и в ответе Pramod, я согласен, что если вы не собираетесь делать какие-либо необычные вещи, продолжайте сверлить реквизиты.