传递给组件子对象的函数不接收函数上下文

Question

我在使用react时陷入困境，其中，我正在将一个函数从父组件传递给多个子组件。该函数调用也驻留在父组件内的其他函数。

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

我不确定是否将所有功能都传递给子元素，这看起来很笨重，而且感觉好像我仍会丢失重要的函数上下文。

我已经测试了在父组件上运行相同的功能，并且没有问题，几乎就像父组件的功能上下文不传递给子组件一样，仅传递给函数本身。

正确吗？

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

父元素：

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);
  }

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

希望这会有所帮助！

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

Answer 2

在父组件的功能中使用箭头语法。这将允许父组件中的功能在父组件的上下文中执行。否则，您将不得不进行大量的绑定（此）操作以使其正常工作。