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

Posted 2023-02-23

【中文标题】传递给反应组件子级的函数不接收函数上下文

【英文标题】：Functions passed to react component children don't receive function context

【发布时间】：2020-08-19 13:47:03

【问题描述】：

我在使用 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>
    )

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

谢谢，你们都很聪明。

【问题讨论】：

您是否尝试过使用箭头语法来定义您的方法？

或者，构造函数中的this.toggleComponent.bind(this)

对不起，this.toggleComponent = this.toggleComponent.bind(this)

@WillD 我没试过，这样定义功能有什么区别？

“箭头函数没有自己的this。使用了封闭词法范围的this值”来自：developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

【参考方案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

【讨论】：

感谢您与我分享此内容，我在进行故障排除时看到了很多关于 .bind 的内容，但从没想过它会成为此问题的罪魁祸首。为什么这会允许函数在从父级执行时运行？我将不得不做更多的研究。也感谢您的链接。

即使没有 .bind()，该函数也会运行。 .bind() 所做的是使this.toggling(name) 中的this 实际上引用Content 类而不是什么，因此您可以调用您定义的其他成员函数（toggling）。没问题，祝你好运！

【参考方案2】：

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

【讨论】：

bind 实际上是一个很好的解决方案，这里的箭头功能问题您需要在所有子组件上使用，绑定您只需对父组件执行此操作即可。当然，使用箭头函数会丢失this，如果您使用范围，则可以，但由于 OP 使用基于类的 React，this 可能对保留有用..