传递给反应组件子级的函数不接收函数上下文

Question

我在使用 react 时卡住了，其中，我将一个函数从父组件传递给多个子组件。该函数调用也驻留在父组件中的其他函数。

子组件确实成功启动了函数，但不幸的是，函数失败了，因为它似乎与子元素中的上下文不同，例如。它开始调用存储在父元素中的其他函数，并接收 undefined。这很奇怪，因为错误来自父组件文件，而不是子组件文件。

我不确定是否将所有函数都传递给子元素，这感觉相当笨重，而且感觉我仍然会丢失重要的函数上下文。

我已经测试过在父组件上运行相同的函数，它没有任何问题，几乎就像父组件的函数上下文没有传递给子组件，只有函数本身。

对吗？

这是一个示例，其中子组件有一个可单击的按钮，该按钮将运行从父组件传递的功能，包括从父组件中运行其他功能、更新状态和进行更改等。

父元素：

class Content extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "React",
      toggle: true,
      ...
    };
  }
  toggleComponent(name) {
      this.toggling(name); // THIS IS WHERE THE ERROR OCCURS ON THE CHILD ELEMENT, undefined.
  }
  toggling(name) {
      does some stuff...
  }

  render() {
   return (
    <Comp toggleComponent={this.toggleComponent}/>
   )
  }

子元素：

class Demo1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
       <div className="button" onClick={() => this.props.toggleComponent('theCompName')}>Continue</div>
    )

让我知道如何将额外的上下文传递给子组件，或者是否有更好的方法来做到这一点。

谢谢，你们都很聪明。

Answer 1

在Content 类的构造函数中，尝试使用.bind() 将toggleComponent 函数绑定到该类：

  constructor(props) {
    super(props);
    this.state = {
      name: "React",
      toggle: true,
      ...
    };

    this.toggleComponent = this.toggleComponent.bind(this);
  }

默认情况下，类方法不会“绑定”到类。这意味着在您使用 .bind() 指定之前，toggleComponent 中的 this 关键字不会引用 Content 类。

希望这会有所帮助！

更多信息可以在这里找到：https://reactjs.org/docs/handling-events.html

Answer 2

在父组件的函数中使用箭头语法。这将允许父组件中的函数在父组件的上下文中执行。否则，您将不得不做一堆绑定（this）废话才能使其正常工作。