如何将数据值从一个子组件传递给另一个子组件？
如何将数据值从一个子组件传递给另一个子组件？
提问于 2020-10-10 07:47:01
我有一个天气项目，我有两个组件。一个用于日间/夜间时间：SunriseSunset，另一个用于每日预报：DailyForecast。我需要将从SunriseSunset获得的时间值传递给DailyForecast。
以下是两个可供参考的组件：
- 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 - DailyForecast.js (第二个文件)->类组件
export class DailyForecast extends Component {
return (
<div>
</div>
)
}
}
export default DailyForecastStack Overflow用户
回答已采纳
发布于 2020-10-10 08:22:33
您应该将共享状态/数据提升到共同祖先。下面是一个实用的CodeSandbox示例。
const Parent = () => {
const timezone = "Asia/Calcutta";
const time2 = moment.tz(timezone).format("HH:mm");
return (
<>
<SunriseSunset time={time2} />
<br />
<DailyForecast time={time2} />
</>
);
}这是官方文档：提升状态
另外，如果您不想在多个级别上钻研道具，那么您应该考虑使用React上下文API或类似于Redux之类的东西来管理应用程序状态。Redux是一个健壮的状态容器，但对于您的用例来说，它可能有些过分。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64291189
复制相关文章
相似问题
腾讯云开发者
