Question

我有一个Weather项目，其中有两个部分。一个用于白天/夜晚时间：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

Answer 1

您应该将共享状态/数据提升到共同祖先。这是工作 CodeSandbox示例。

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

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

这是官方文档：Lifting State Up

此外，如果您不想在多个级别上挖掘道具，则应考虑使用React context API或类似Redux的东西来管理应用程序状态。 Redux是一个健壮的状态容器，但对于您的用例而言可能会显得过分。

Answer 2

您需要问自己的第一个问题是这两个子组件是否具有相同的父代？

您需要将值从SunriseSunset传递到DailyForecast的同一父级，然后在父级获取值时，需要将值向下传递到DailyForecast；（您还可以使用上下文api以更简单的方式进行操作）< / p>

您可以使用redux之类的第三方状态管理库来构建隔离状态。

然后您需要使SunriseSunset和DailyForecast可以访问此隔离状态。之后，这些子组件就可以共享状态；（有太多的状态管理库，例如Mobx或状态机）

如果您不想要上述任何解决方案，则还有其他选择。只需使用本地存储或url共享您的状态即可。

例如，在SunriseSunset中，您可以将此状态保存在localstorage或url中，在DailyForecast中，您可以从当前url或localstorage中读取此状态。但是这个选项并不优雅。

如何在React中将数据值从一个子组件传递到另一个子组件？

2 个答案: