Reactjs 如何在React中将数据值从一个子组件传递到另一个子组件?
我有一个气象项目,我有两个部分。一个用于日间/夜间计时:Reactjs 如何在React中将数据值从一个子组件传递到另一个子组件?,reactjs,Reactjs,我有一个气象项目,我有两个部分。一个用于日间/夜间计时:日出日落另一个用于每日预报:每日预报。我需要将从日出日落获得的时间值传递到每日预测 以下是供参考的两个组件: SunriseSessend.js(第一个文件)->功能组件 const日出日落=(道具)=>{ const time2=moment.tz(props.timezone.format('HH:mm')) //我想在DailyForecast.js文件中传递time2值 返回( ) } 导出默认日出日落 DailyForecas
日出日落
另一个用于每日预报:每日预报
。我需要将从日出日落
获得的时间值传递到每日预测
以下是供参考的两个组件:
const日出日落=(道具)=>{
const time2=moment.tz(props.timezone.format('HH:mm'))
//我想在DailyForecast.js文件中传递time2值
返回(
)
}
导出默认日出日落
导出类DailyForecast扩展组件{
报税表(
)
}
}
导出默认每日预测
您应该将共享状态/数据提升到公共祖先。这是一张工作票
例如
const Parent=()=>{
const timezone=“亚洲/加尔各答”;
const time2=矩.tz(时区).format(“HH:mm”);
返回(
);
}
以下是官方文件:
此外,如果您不想在多个级别上钻研道具,那么您应该考虑或类似于ReDux来管理应用程序状态。Redux是一个健壮的状态容器,但对于您的用例来说,它可能有些过分
例如,在SunriseSunset中,您可以将此状态保存在localstorage或url中,在DailyForecast中,您可以从当前url或localstorage中读取此状态。但是这个选项并不优雅。是
DailyForecast
日出日落的继承者或嵌套子代吗?道具是为此而设计的,您也可以使用React-Context API在组件之间传递数据。@im\u-tsm它的非嵌套子代,两者都是兄弟姐妹,但它们共享一个共同的父代权利?@im\u-tsm yes-rightYes,本地存储不是此场景的理想用例。只有当需要在页面刷新(即应用程序重置/重新运行)期间持久化数据时,才应该使用本地存储。另外,只需提及,您必须编写副作用(useffect
)来读取或写入本地存储。实际上,我自己解决了。。。但是,即使这对我来说也是有用的。。。谢谢
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
const Parent = () => {
const timezone = "Asia/Calcutta";
const time2 = moment.tz(timezone).format("HH:mm");
return (
<>
<SunriseSunset time={time2} />
<br />
<DailyForecast time={time2} />
</>
);
}