Javascript 调用React组件'；来自外部的s方法（带有它的状态和道具）

我一直在打电话给我的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不是一个对象（计算'Calculator.state.btnClicked'）。在我看来，这意味着当调用clickRemoveHandler时，它与计算器组件没有关联，或者无法访问其状态和道具。

---

问题是我如何才能使所有的工作一起进行？调用函数时传递计算器状态，或者有其他更优雅的方法吗？

对于您描述的情况（不同级别的不同组件需要访问某些状态并对其进行操作），我建议您使用React

context

。您还可以查看状态管理器，如

Redux

或

MobX

，但在这种特殊情况下，由于您的应用程序不是那么“庞大”，因此这将是开销。基本上，您需要创建一些单独的文件夹（您可以称之为

context

），在其中您应该创建context本身，导出它并将最高级的组件封装在其中，以便所有的子级都能够使用它

您可以在此处找到一个示例：

以下是指向文档的链接：

---

如果您需要，我可以向您提供更多详细信息。对于您描述的案例（不同级别的不同组件需要访问某些状态并对其进行操作），我建议您使用React

context

。您还可以查看状态管理器，如

Redux

或

MobX

，但在这种特殊情况下，由于您的应用程序不是那么“庞大”，因此这将是开销。基本上，您需要创建一些单独的文件夹（您可以称之为

context

），在其中您应该创建context本身，导出它并将最高级的组件封装在其中，以便所有的子级都能够使用它

您可以在此处找到一个示例：

以下是指向文档的链接：

---

如果您需要，我可以向您提供更多详细信息。这是一个挑战，但我已经做到了！ 布局组件：

state = {
    firstMount: false,
    clicked: false,
    clickedEvt: null
};
clickHandler = (event) => {
    console.log('Clikced')
    if (this.state.clickedEvt) 
        this.setState({clicked: false, clickedEvt: null});
    else         
        this.setState({clicked: true, clickedEvt: event.target}, ()=>{setTimeout(() => 
            this.setState({clicked: false, clickedEvt: null})
        , 50)})

};
        <LayoutContext.Provider value={{
            clicked: this.state.clicked,
            clickedEvt: this.state.clickedEvt,
            handleClick: this.clickHandler
        }}>

render() {
    return(
        <div onClick={(event) => this.clickHandler(event)} className="web">

---

这是一个挑战，但我做到了！ 布局组件：

state = {
    firstMount: false,
    clicked: false,
    clickedEvt: null
};
clickHandler = (event) => {
    console.log('Clikced')
    if (this.state.clickedEvt) 
        this.setState({clicked: false, clickedEvt: null});
    else         
        this.setState({clicked: true, clickedEvt: event.target}, ()=>{setTimeout(() => 
            this.setState({clicked: false, clickedEvt: null})
        , 50)})

};
        <LayoutContext.Provider value={{
            clicked: this.state.clicked,
            clickedEvt: this.state.clickedEvt,
            handleClick: this.clickHandler
        }}>

render() {
    return(
        <div onClick={(event) => this.clickHandler(event)} className="web">

---

在这里你可以找到一些答案在这里你可以找到一些答案谢谢你的答案！谢谢你的回答！