一种从外部调用 React 组件方法的方法（带有状态和属性）

Question

我一直在调用我的 clickRemoveHandler。我的想法是，我有两个组件：第一个 - 渲染页眉、导航和页脚组件的布局，第二个 - 计算器，它是我的核心组件，具有数据输入等...在计算器组件中，我有具有托管状态的按钮，所以当我单击时在布局组件（div）的任何地方，我需要调用计算器函数来操作我的按钮。代码如下：

class Layout extends Component {

.....

    clickHandler = (event) => {

        Calculator.clickRemoveHandler(event);

        console.log('Clikced')

    };

.....

}

class Calculator extends Component {

  state = {

    currentServiceClass: null,

    hoverIndex: null,

    btnClicked: false,

    selectedService: null

  }

  currentCursorPosition = {

    el: null,

    index: null,

    rendered: false

  }

  static clickRemoveHandler = (event) => {

    if ((!event.target.hasAttribute("type")) && (this.state.btnClicked)) {

      this.currentCursorPosition = {

        el: null,

        index: null,

        rendered: false

      };

      this.setState({currentServiceClass: null, hoverIndex: null, btnClicked: false})

    }

  }

....

}

这些组件中有很多逻辑，因此它们太强大，无法发布完整的代码。但问题是布局中没有计算器引用，计算器本身是通过另一个组件的路由渲染的，所以我无法将任何数据从布局直接传递到计算器。我想要的是从布局中调用静态 clickRemoveHandler 。我猜静态是使函数全局化的一个选项。所以它有效，但我收到错误 TypeError: undefined is not an object (evaluating 'Calculator.state.btnClicked')。正如我所见，这意味着当调用 clickRemoveHandler 时，它不与计算器组件关联，或者无法访问其状态和属性。问题是我怎样才能让这一切一起工作？调用函数时传递计算器状态还是有另一种更优雅的方法来做到这一点？

Answer 1

我建议对于您描述的情况（不同级别的不同组件需要访问某些状态并对其进行操作）使用 React context。您还可以查看状态管理器，例如Redux或MobX，但在这种特殊情况下，这将是开销，因为您的应用程序不是那么“巨大”。基本上，您需要创建一些单独的文件夹（您可以将其称为context），在其中您应该创建上下文本身，将其导出并将其包装在最上层的组件中，以便所有子级都能够使用它。您可以在这里找到一个示例：https ://codesandbox.io/s/spring-glitter-0vzul 。这是文档的链接： https: //reactjs.org/docs/context.html如果您需要，我可以为您提供更多详细信息

Answer 2

这是一个挑战，但我已经做到了！布局组件：state = {&nbsp; &nbsp; firstMount: false,&nbsp; &nbsp; clicked: false,&nbsp; &nbsp; clickedEvt: null};clickHandler = (event) => {&nbsp; &nbsp; console.log('Clikced')&nbsp; &nbsp; if (this.state.clickedEvt)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; this.setState({clicked: false, clickedEvt: null});&nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; this.setState({clicked: true, clickedEvt: event.target}, ()=>{setTimeout(() =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({clicked: false, clickedEvt: null})&nbsp; &nbsp; &nbsp; &nbsp; , 50)})};&nbsp; &nbsp; &nbsp; &nbsp; <LayoutContext.Provider value={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clicked: this.state.clicked,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clickedEvt: this.state.clickedEvt,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handleClick: this.clickHandler&nbsp; &nbsp; &nbsp; &nbsp; }}>render() {&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <div onClick={(event) => this.clickHandler(event)} className="web">首先，我从布局组件调用handleClick作为onclick事件，然后从计算器再次调用它&nbsp; componentDidUpdate() {&nbsp; &nbsp; if (this.context.clicked) {&nbsp; &nbsp; &nbsp; this.clickRemoveHandler(this.context.clickedEvt)&nbsp; &nbsp; }&nbsp; }