如何在Reactjs中从另一个组件触发状态

开发01

您好,我需要帮助。

我有一个进度条组件和一个在其中使用进度条的组件。另一个组件应该触发进度条。

APP的示例结构

  • Home.js
    • 具有进度条的组件(组件1)
      • 中间的组件(组件2)
        • 我要从(组件3)触发进度条的组件
  • ProgressBar组件(ProgressBar)

https://codesandbox.io/s/optimistic-stallman-rjxi9?file=/src/App.js

这是我真正想要实现的目标以及如何实现它的一个示例。该代码不起作用,但是您将从代码的结构中得到启发。

我想onClick组件3执行以更改进度栏状态,该状态位于组件1中,但是中间有一个组件,以及它自己的组件上的进度条。

我尝试做的事情是将函数正常传递给组件中的新函数,该组件要从(组件3触发该动作并将该函数传递给按钮。但它收到错误“类型错误this.props。*不是函数”

先感谢您

伊万德

您需要使Component2(C2)和Component3(C3)成为Component1的子代,并handleProgress作为道具传递给Component2和Component3,例如此处https://codesandbox.io/s/blue-lake-6mx7o?fontsize=14&hidenavigation= 1&theme =暗

现在,您已经handleProgress在C1中创建了一个函数,但从未将其传递给C2和C3。

要将其传递给C2和C3,您需要将它们从App组件中删除,然后将其移至C1。

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

从另一个组件修改组件的状态

来自分类Dev

如何将状态className变量传递给React中的另一个组件

来自分类Dev

从另一个文件中的另一个组件更改一个组件的状态

来自分类Dev

如何在ReactJs中重定向到另一个类组件/页面

来自分类Dev

如何从reactjs的另一个模块导出状态

来自分类Dev

在ReactJS中,如何在另一个组件中渲染一个组件?

来自分类Dev

如何在React中从另一个组件设置一个组件的状态

来自分类Dev

如何在Nuxt中从另一个状态访问一个Vuex状态?

来自分类Dev

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

来自分类Dev

如何在Angular中的另一个动态加载的组件内渲染组件?

来自分类Dev

如何从表单存储,提交和复制输入到ReactJS中的另一个组件

来自分类Dev

如何在另一个组件中使用一个组件的状态?独立组件(反应)

来自分类Dev

如何在React Native中从另一个功能组件更改一个功能组件的状态?

来自分类Dev

ReactJS-另一个组件中的触发函数

来自分类Dev

如何在reactjs的另一个应用程序中创建可重用组件?

来自分类Dev

如果我有一个按钮在React中的第二个子级中触发状态,如何将状态传递给父级组件

来自分类Dev

从另一个文件中的另一个组件更改一个组件的状态

来自分类Dev

ReactJS.NET-如何从一个组件更新另一个组件中的props?

来自分类Dev

当另一个组件的子组件的状态在 react 中改变时触发事件

来自分类Dev

另一个组件中的 Reactjs Ref

来自分类Dev

如何从一个组件访问状态值到另一个文件中的另一个函数(不是组件)?反应 js

来自分类Dev

如何更改一个组件中的状态并在另一个 Vue.js 中监听它?

来自分类Dev

更改另一个组件中的状态

来自分类Dev

Reactjs 访问另一个组件的状态

来自分类Dev

在 Vue 上,如何在另一个组件中使用一个组件中的函数?

来自分类Dev

如何在另一个文件中获取组件的状态 react native

来自分类Dev

如何在 React Native 的另一个组件中使用 API 获取状态

来自分类Dev

React – 如何在另一个已安装的组件中渲染附加组件?

来自分类Dev

在 reactjs 的另一个组件中渲染状态

Related 相关文章

  1. 1

    从另一个组件修改组件的状态

  2. 2

    如何将状态className变量传递给React中的另一个组件

  3. 3

    从另一个文件中的另一个组件更改一个组件的状态

  4. 4

    如何在ReactJs中重定向到另一个类组件/页面

  5. 5

    如何从reactjs的另一个模块导出状态

  6. 6

    在ReactJS中,如何在另一个组件中渲染一个组件?

  7. 7

    如何在React中从另一个组件设置一个组件的状态

  8. 8

    如何在Nuxt中从另一个状态访问一个Vuex状态?

  9. 9

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

  10. 10

    如何在Angular中的另一个动态加载的组件内渲染组件?

  11. 11

    如何从表单存储,提交和复制输入到ReactJS中的另一个组件

  12. 12

    如何在另一个组件中使用一个组件的状态?独立组件(反应)

  13. 13

    如何在React Native中从另一个功能组件更改一个功能组件的状态?

  14. 14

    ReactJS-另一个组件中的触发函数

  15. 15

    如何在reactjs的另一个应用程序中创建可重用组件?

  16. 16

    如果我有一个按钮在React中的第二个子级中触发状态,如何将状态传递给父级组件

  17. 17

    从另一个文件中的另一个组件更改一个组件的状态

  18. 18

    ReactJS.NET-如何从一个组件更新另一个组件中的props?

  19. 19

    当另一个组件的子组件的状态在 react 中改变时触发事件

  20. 20

    另一个组件中的 Reactjs Ref

  21. 21

    如何从一个组件访问状态值到另一个文件中的另一个函数(不是组件)?反应 js

  22. 22

    如何更改一个组件中的状态并在另一个 Vue.js 中监听它?

  23. 23

    更改另一个组件中的状态

  24. 24

    Reactjs 访问另一个组件的状态

  25. 25

    在 Vue 上,如何在另一个组件中使用一个组件中的函数?

  26. 26

    如何在另一个文件中获取组件的状态 react native

  27. 27

    如何在 React Native 的另一个组件中使用 API 获取状态

  28. 28

    React – 如何在另一个已安装的组件中渲染附加组件?

  29. 29

    在 reactjs 的另一个组件中渲染状态

热门标签

归档