时间戳

首页 > 解决方案 > 传递给反应组件子级的函数不接收函数上下文

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

问题描述

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

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

谢谢，你们都很聪明。

标签： javascriptreactjscomponentsundefinedreact-props

解决方案

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

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

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

默认情况下，类方法不“绑定”到类。这意味着您的this关键字 intoggleComponent不引用Content该类，直到您使用.bind().

希望这可以帮助！

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

推荐阅读