如何将数据值从一个子组件传递给另一个子组件？
如何将数据值从一个子组件传递给另一个子组件？
提问于 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 DailyForecast回答 2
Stack 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用户
发布于 2020-10-10 08:43:43
- 您需要问自己的第一个问题是，这两个子组件是否具有相同的父组件？
您需要将值从SunriseSunset传递给DailyForecast的同一个父级，然后当父节点获得所需的值时，将值向下传递给DailyForecast；(您还可以使用上下文api以更简单的方式完成此操作)
- 您可以使用第三方状态管理库(如redux )来构造孤立状态。
然后，您需要使SunriseSunset和DailyForecast能够访问这种孤立的状态。之后，这些子组件能够共享状态；(有许多状态管理库，如Mobx或状态机)。
- 如果您不想要上述任何解决方案，还有其他选项。只需使用本地存储或url共享您的状态。
例如，在SunriseSunset中，您可以将此状态保存在本地存储或url中，而在DailyForecast中，您可以从当前url或本地存储中读取此状态。但这一选择并不优雅。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64291189
复制相关文章
相似问题
腾讯云开发者
