Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/25.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/mercurial/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 如何在React中将数据值从一个子组件传递到另一个子组件?_Reactjs - Fatal编程技术网

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

Reactjs 如何在React中将数据值从一个子组件传递到另一个子组件?,reactjs,Reactjs,我有一个气象项目,我有两个部分。一个用于日间/夜间计时:日出日落另一个用于每日预报:每日预报。我需要将从日出日落获得的时间值传递到每日预测 以下是供参考的两个组件: SunriseSessend.js(第一个文件)->功能组件 const日出日落=(道具)=>{ const time2=moment.tz(props.timezone.format('HH:mm')) //我想在DailyForecast.js文件中传递time2值 返回( ) } 导出默认日出日落 DailyForecas

我有一个气象项目,我有两个部分。一个用于日间/夜间计时:
日出日落
另一个用于每日预报:
每日预报
。我需要将从
日出日落
获得的时间值传递到
每日预测

以下是供参考的两个组件:

  • SunriseSessend.js(第一个文件)->功能组件
  • const日出日落=(道具)=>{
    const time2=moment.tz(props.timezone.format('HH:mm'))
    //我想在DailyForecast.js文件中传递time2值
    返回(
    ) 
    }
    导出默认日出日落
    
  • DailyForecast.js(第二个文件)-->类组件
  • 导出类DailyForecast扩展组件{
    报税表(
    )
    }
    }
    导出默认每日预测
    
    您应该将共享状态/数据提升到公共祖先。这是一张工作票 例如

    const Parent=()=>{
    const timezone=“亚洲/加尔各答”;
    const time2=矩.tz(时区).format(“HH:mm”);
    返回(
    
    ); }
    以下是官方文件:

    此外,如果您不想在多个级别上钻研道具,那么您应该考虑或类似于ReDux来管理应用程序状态。Redux是一个健壮的状态容器,但对于您的用例来说,它可能有些过分

  • 您需要问自己的第一个问题是,这两个子组件是否具有相同的父组件
  • 您需要将值从SunriseSunset传递到DailyForecast的同一父级,然后当父级获得需要的值时,将该值向下传递到DailyForecast;(您还可以使用上下文api以更简单的方式进行此操作)

  • 您可以使用第三方状态管理库(如redux)来构建隔离状态
  • 然后你需要让SunriseStension和DailyForecast能够访问这个孤立的状态。之后,这些子组件能够共享状态;(有很多状态管理库,如Mobx或状态机)

  • 如果您不想使用上述任何解决方案,还可以使用其他选项。 只需使用本地存储或url共享您的状态

  • 例如,在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} />
        </>
      );
    }