我有一个天气项目,其中有两个部分。一个用于日/夜定时:SunriseSunset
另一个用于每日预报:DailyForecast
。我需要将从获得的时间值传递SunriseSunset
给DailyForecast
。
以下是两个组件供参考:
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
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是一个健壮的状态容器,但对于您的用例而言可能会显得过高。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句