我的 struct 如下:

Component 1

 - |- Component 2


 - - |- Component 4


 - - -  |- Component 5

Component 3

组件3应根据组件5的状态显示一些数据.

由于props 是不可变的,我不能简单地将其状态保存在组件1中并转发它,对吗?是的,我读了大约Redux本,但我不想用它.我希望仅凭react 就能解决这个问题.我说错了吗?

推荐答案

对于子代-父代通信,您应该传递一个函数来设置从父代到子代的状态,如下所示


class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      someVar: 'some value'
    })
  }

  render() {
    return <Child handler = {this.handler} />
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick = {this.props.handler}/ >
  }
}

通过这种方式,子对象可以通过使用props传递的函数调用来更新父对象的状态.

但你必须重新考虑组件的 struct ,因为据我所知,组件5和组件3并不相关.

一种可能的解决方案是将它们包装在一个更高级别的组件中,该组件将包含组件1和3的状态.该组件将通过props 设置较低级别的状态.

Javascript相关问答推荐

实现JS代码更改CSS元素

第二次更新文本输入字段后,Reaction崩溃

如何将zoom 变换应用到我的d3力有向图?

以编程方式聚焦的链接将被聚焦,但样式不适用

如何在一个对象Java脚本中获取不同键的重复值?

如何找到带有特定文本和测试ID的div?

如何通过Axios在GraphQL查询中发送数组

自动滚动功能在当前图像左侧显示上一张图像的一部分

我怎样才能得到一个数组的名字在另一个数组?

如果对象中的字段等于某个值,则从数组列表中删除对象

如何设置时间选取器的起始值,仅当它获得焦点时?

使用静态函数保存 node 前的钩子

Google OAuth 2.0库和跨域开放程序的问题-策略错误

webpack 5和mini-css-extract-plugin在将scss保存到css文件后不加载css

无限循环,因为变量不断被重新声明为其原始值

在脚本设置中使用Vue3 v-html,无需额外的换行标记

将数组解析为js中的无序列表

智能合同与Ether.js的集成

使用new关键字或createElement()创建的自定义元素没有is:属性,为什么?

素材界面如何让自动完成弹出框不受菜单限制