Question

我已经读过this answer，但是我想稍微改变一下代码的结构，

实际上我想从子组件设置父状态，但是 我不想在父组件中添加任何功能

实际上预期结果如下：

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state={modalVisible:false}
  }

  render() {
    return (
      <Child modalVisible={this.state.modalVisible} />
      <Button onClick={()=>this.setState({modalVisible:true})/>
    )
  }
}

class Child extends React.Component {

  handler(e) {
    //handle parent moadlVisible state to false again
  }

  render() {
    return
      <Modal
        modalVisible = {this.props.modalVisible}>
        <Button title="Close Modal" onPress={()=>this.handler(e)}/>
      </Modal>
  }
}

因此，我想轻松地调用child component，而无需在parent中添加一些函数来处理child component本身，即使关闭{{ 1}}

有没有办法实现我想要的？

Answer 1

如果您根本不需要两个组件之间的任何连接，则可能必须使用全局状态存储，例如redux。

文档可以在这里找到：

https://redux.js.org/introduction

Redux在所有组件之间创建一个全局状态，而不是局部状态。它确实需要一些配置，但是一旦完全集成，就可以解决您的情况。而且，随着组件的增长，跟踪状态会变得更加容易。

为什么我不能只使用事件？

在这里提问。

react.js custom events for communicating with parent nodes

React方法是将回调显式传递给子级通过道具—。不支持带有冒泡的自定义事件反应。

反应式编程抽象是正交的：

通过观察者模式对交互系统进行编程是困难且容易出错，但仍然是许多实施标准生产环境。我们提出一种逐渐淘汰的方法观察者赞成反应式编程抽象。一些库层帮助程序员平稳地从中迁移现有代码回调到更具声明性的编程模型。

在我眼中，做这件事的一种可怕方式可能是使用Async Storage

存储键值，但是我不建议这样做。

React Native-从子组件（自定义组件）处理父状态，而无需在父组件中添加功能

1 个答案: