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

用户13970228

我有一个天气项目,其中有两个部分。一个用于日/夜定时:SunriseSunset另一个用于每日预报:DailyForecast我需要将从获得的时间值传递SunriseSunsetDailyForecast

以下是两个组件供参考:

  1. 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  
  1. DailyForecast.js(第二个文件)->类组件
export class DailyForecast extends Component { 

        return ( 
            <div>
            
            </div>
        )
    }
}

export default DailyForecast
im_tsm

您应该将共享状态/数据提升到公共祖先。这是一个有效的CodeSandbox示例。

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

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

这是官方文档:提升状态

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在.htaccess中从一个子域重定向到另一个子域?

来自分类Dev

在Adobe CQ中将数据从一个组件传递到另一个组件

来自分类Dev

将两个结果在一个子传递到另一个子

来自分类Dev

如何在React.js中从一个组件(子组件)到另一个组件(父组件)获取值?

来自分类Dev

我想在react中访问另一个子组件中一个子组件的值

来自分类Dev

如何在VueJS中将值从一个子组件传递到另一个子组件?

来自分类Dev

在ReactJs中将状态从一个组件传递到另一个组件

来自分类Dev

Vue.js:将数据从一个子组件传递到具有相同父组件的另一个子组件吗?

来自分类Dev

在React中将状态数据从一个组件传递到另一个组件

来自分类Dev

使用Formik在React中将数据从一个组件传递到另一个组件

来自分类Dev

将点击事件从一个子组件传递到另一个子组件

来自分类Dev

React-如何将API数据从一个组件传递到另一个js文件中的另一个组件?

来自分类Dev

将值从子窗体传递到另一个子窗体

来自分类Dev

在VBA中将变量的值从一个子变量转换为另一个子变量

来自分类Dev

如何从一个单独的子组件修改一个子组件的道具?

来自分类Dev

如何基于事件使用React将一个子react / html组件替换为另一个子组件?

来自分类Dev

如何访问另一个子组件中插槽的内容

来自分类Dev

如何在 VBA 中将字段的设置变量名称从一个子例程传递到另一个子例程?

来自分类Dev

如何从子组件访问 Angular 4 中的另一个子组件

来自分类Dev

想要将值从子组件传递给父组件,然后将这些值传递给另一个子组件

来自分类Dev

如何在 Angular 5 中将服务数据从一个组件传递到另一个组件

来自分类Dev

如何在 react-native 中将函数的结果从一个组件传递到另一个组件?

来自分类Dev

如何将回调从一个子组件传递到另一个

来自分类Dev

如何知道另一个子组件中一个子组件的事件

来自分类Dev

React Native - 将数据从一个组件传递到另一个

来自分类Dev

如何在 React 中将数据从单击的组件从一个路由传递到另一个路由?

来自分类Dev

如何将数据从一个子组件传递给父组件和其他子组件?

来自分类Dev

React Native ScrollView - 如何从另一个子组件按钮滚动到子组件?

来自分类Dev

如何将子组件路由到另一个子组件

Related 相关文章

  1. 1

    如何在.htaccess中从一个子域重定向到另一个子域?

  2. 2

    在Adobe CQ中将数据从一个组件传递到另一个组件

  3. 3

    将两个结果在一个子传递到另一个子

  4. 4

    如何在React.js中从一个组件(子组件)到另一个组件(父组件)获取值?

  5. 5

    我想在react中访问另一个子组件中一个子组件的值

  6. 6

    如何在VueJS中将值从一个子组件传递到另一个子组件?

  7. 7

    在ReactJs中将状态从一个组件传递到另一个组件

  8. 8

    Vue.js:将数据从一个子组件传递到具有相同父组件的另一个子组件吗?

  9. 9

    在React中将状态数据从一个组件传递到另一个组件

  10. 10

    使用Formik在React中将数据从一个组件传递到另一个组件

  11. 11

    将点击事件从一个子组件传递到另一个子组件

  12. 12

    React-如何将API数据从一个组件传递到另一个js文件中的另一个组件?

  13. 13

    将值从子窗体传递到另一个子窗体

  14. 14

    在VBA中将变量的值从一个子变量转换为另一个子变量

  15. 15

    如何从一个单独的子组件修改一个子组件的道具?

  16. 16

    如何基于事件使用React将一个子react / html组件替换为另一个子组件?

  17. 17

    如何访问另一个子组件中插槽的内容

  18. 18

    如何在 VBA 中将字段的设置变量名称从一个子例程传递到另一个子例程?

  19. 19

    如何从子组件访问 Angular 4 中的另一个子组件

  20. 20

    想要将值从子组件传递给父组件,然后将这些值传递给另一个子组件

  21. 21

    如何在 Angular 5 中将服务数据从一个组件传递到另一个组件

  22. 22

    如何在 react-native 中将函数的结果从一个组件传递到另一个组件?

  23. 23

    如何将回调从一个子组件传递到另一个

  24. 24

    如何知道另一个子组件中一个子组件的事件

  25. 25

    React Native - 将数据从一个组件传递到另一个

  26. 26

    如何在 React 中将数据从单击的组件从一个路由传递到另一个路由?

  27. 27

    如何将数据从一个子组件传递给父组件和其他子组件?

  28. 28

    React Native ScrollView - 如何从另一个子组件按钮滚动到子组件?

  29. 29

    如何将子组件路由到另一个子组件

热门标签

归档