如何在 class 之外调用 React 组件的方法？

Question

我的 React 单页应用程序中有一个模式。 我制作了一个模态的 class 组件并将其呈现在页面的某个位置。 我需要从这个模式的应用程序中的许多其他页面调用它。 我的模态 class：

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalShow: false,
    }
  }
  setModalShow(state){
   this.setState({modalShow: state});
  }      
  render(){...}
}

模态的 State 我保持模态 class。 我想通过从模态 class 外部更改 state 来显示模态。 例如像

import Modal from './Modal'
...
Modal.setModalShow(true)

但是 Modal 它是 class，但我需要在 class 的实例中调用 setModalShow。 而且我不明白如何以真正的方式做这样的事情。

Answer 1

这种行为需要将 function 作为子属性传递，如下所示：

class Modal extends React.Component {

  constructor(props) {
    super(props);
  }

  setModalShow(state){
   this.props.showModal(true);
  }      

  render(){
    ...
  }
}

无论您在哪里使用模态，都应该显示 state ，例如：

class ModalWrapper extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    }
  }

  showModal(state){
    this.setState({modalShow: state});
  }      

  render(){
    return (<Modal showModal={showModal} />);
  }
}

Answer 2

虽然您可以，正如其他人所建议的那样，传递一个 function 允许您将方法注册到另一个组件，但这可能不是在组件外部打开模式的“反应”方式（这意味着有一些方法可以，我相信，用 React 写起来比这更清楚）。 我建议要么将打开的 state 设置为道具，要么在反应上下文中保持模态 state （或者甚至通过打开 function 作为上下文，如果发生更多事情而不是简单地将道具打开作为上下文）钻孔。

您可以在 React 文档中阅读上下文 API： https://reactjs.org/docs/context.html 。 请注意，在功能组件中用作挂钩要简单得多，但它也适用于类。

Answer 3

您应该将方法setModalShow从Modal传递给它的一个子组件，然后子组件将调用this.props.setModalShow(true) 。

Answer 4

我决定使用 Redux。 在动机中描述了我的问题。