我的结构如下:

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传递的函数调用来更新父对象的状态.

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

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

Javascript相关问答推荐

像stackoverflow这样的textarea预览有

我如何用对象对数组进行冒泡排序?

显示 React 中选定过滤器数组的总数

两行相同代码的区别

React 审核表单在提交时未提交审核

Svelte 仅支持 es6+ 语法.将“compilerOptions.target”设置为“es6”或更高

runtime.js:7 未捕获的错误:[RequireAuth] 不是 组件. 的所有子组件必须是

nuxt 中未调用 AsyncData

删除芥末 CDN 存储桶 204 错误未删除

使用 NextJS 确保敏感代码仅在服务器端运行,这些代码可以从哪里运行?

如何将一些 Nuxt 代码转换为一些 Vue?

我该如何解决这个错误:FirebaseError: Expected type 'mc', but it was: a custom yc object?

如何使用 html 中的 select 元素创建 javascript 测验并将结果粘贴到 main

在 WebRTC 中更改密码

如何在 React Native 上的 Firebase 中获取特定文档的文档 ID?

createAsyncThunk 中的参数和参数应该如何设置?

未捕获的类型错误:无法读取未定义的属性(读取“url”)

document.getElementById().value - 覆盖或知道何时访问

悬停时未出现元素

处理网格列值中的货币格式