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

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 本身，即使关闭child component 的modal 也是如此

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

Answer 1

如果您根本不希望这两个组件之间有任何连接，那么您可能必须使用全局状态存储，例如 redux。

文档可以在这里找到：

https://redux.js.org/introduction

Redux 在所有组件之间创建一个全局状态而不是局部状态。它确实需要一些配置，但是一旦您将其完全集成，您就可以处理您的场景。此外，随着组件的增长，跟踪状态会更容易。

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

在这里引用一个问题..

react.js custom events for communicating with parent nodes

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

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

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

在我看来，一种可怕的做法可能是使用Async Storage

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