ReactJS - ContextType有哪些替代方案？

Question

为了保持组件的唯一目的原则，我有一个深层次的组件，下面很多深度都有一个开放式模式按钮。

当第一次完成整个页面时，我愚蠢地意识到具有在非常深层的子项中打开模态的功能，导致模态窗口在该子项的参数内打开而不是整个窗口。

当我试图克服这个问题时，我发现自己太过于自由地将支柱功能传递给不需要该支柱的子组件，直到进一步传递。我可以看到这将是一场噩梦。

作为最后的手段，我选择了上下文类型：

主要页面组件：

{{pathFor 'editCustomer' _id=customer}}

很多代儿童成员：

export default class MainPage extends Component {
     ......

  getChildContext() {
    return {
      openModal: (arg) => this.openModal(arg)
      }
  }

  openModal(content) {
    if (content !== undefined) {
      const open = content.modalOpen
      this.setState({modalOpen: open});
    }
}

render() {
   .....
  return(
      { modalOpen ?
        <Modal>
           ....
        </Modal>
       : '' }
    )   
  }
}

}

经常读取不支持contextType的地方，将来可能会废除，但在这种情况下，我看不到更清洁，更有效的方法。

根据我讨论的情况，我是采取谨慎态度还是有更好的方法？

谢谢！

Answer 1

我希望我的子视图可以调度一个可以在根组件中处理的事件。

Webpack和Browserify都有方便的方法在浏览器中使用像事件发射器这样的nodejs。这也是大多数磁通实施用于其调度员的原因。

您可以在子级和父级中导出所需的事件发射器的单例实例。即..

import {EventEmitter} from 'events'
exports default new EventEmitter()

然后从您的子组件

import emitter from './youemitter'
....
  openModal() {
    emitter.dispatchEvent(OPEN_MODAL, props)
  }

在你的父母那里你可以

import emitter from './youremitter'
....
  componentDidMount() {

    emitter.addEventListener(OPEN_MODAL, this.openYourModal)

以同样的方式，您可以从您的子视图中收听事件，以更新您的数据模型或通量存储或您可能拥有的内容并重新呈现。