Блог

У меня есть проект погоды, в котором у меня есть два компонента. Один для дневных / ночных таймингов: SunriseSunset и другой для ежедневного прогноза : DailyForecast . Мне нужно передать значение времени, полученное от SunriseSunset to DailyForecast .

Вот два компонента для справки:

1. SunriseSunset.js (Первый файл) —> Функциональный компонент

 const SunriseSunset = (props) => {

    const time2  = moment.tz(props.timezone).format('HH:mm')

   // I want to pass the time2 value in DailyForecast.js file
    
    return (
        <React.Fragment>

        
        </React.Fragment>
    ) 
}



export default SunriseSunset  
  

2. DailyForecast.js (Второй файл) —> Компонент класса

 export class DailyForecast extends Component { 

        return ( 
            <div>
            
            </div>
        )
    }
}

export default DailyForecast
  

Вы должны поднять общее состояние / данные до общего предка. Вот рабочий пример CodeSandbox.

 const Parent = () => {
  const timezone = "Asia/Calcutta";
  const time2 = moment.tz(timezone).format("HH:mm");

  return (
    <>
      <SunriseSunset time={time2} />
      <br />
      <DailyForecast time={time2} />
    </>
  );
}
  

Вот официальная документация: подъем состояния вверх

Кроме того, если вы не хотите детализировать реквизиты на нескольких уровнях, вам следует рассмотреть React context API или что-то вроде Redux для управления состоянием приложения. Redux — это надежный контейнер состояний, но он может быть излишним для вашего варианта использования.

1. Первый вопрос, который вам нужно задать себе, — имеют ли эти два дочерних компонента одного и того же родителя?

вам нужно передать значения из SunriseSunset тому же родительскому элементу DailyForecast, а затем, когда родительский элемент получит значение, ему нужно передать значение в DailyForecast; (вы также можете использовать context api, чтобы сделать это более простым способом)

2. Вы можете использовать стороннюю библиотеку управления состоянием, такую как redux, для создания изолированного состояния.

И затем вам нужно, чтобы SunriseSunset и DailyForecast имели доступ к этому изолированному состоянию. после этого эти дочерние компоненты могут совместно использовать состояния; (существует так много библиотек управления состоянием, таких как Mobx или state-machine)

3. Есть и другие варианты, если вам не нужно ни одно из вышеперечисленных решений. Просто используйте локальное хранилище или URL, чтобы поделиться своими состояниями.

Например, в SunriseSunset вы можете сохранить это состояние в localstorage или url, а в DailyForecast вы можете прочитать это состояние из текущего URL или localstorage. Но этот вариант не является элегантным.