React，“this”，cloneElement和es6 [英] React, "this", cloneElement and es6

问题描述

我想知道当您传递函数时，ES6和cloneElement如何工作。我需要引用父组件状态，但这个引用子组件而不是父组件。

I am wondering how ES6 and cloneElement works when you pass it a function. I need to reference state in the parent component's state but this references the child component and not the parent.

以下是常规JavaScript中的代码，使其正常工作，首先在ES6中写入并在键盘上敲击我的头，我决定看看是否是ES6，所以我重构，它的工作很好。

Below is the code in regular JavaScript to make it work, after first writing it in ES6 and banging my head on the keyboard I decided to see if it was ES6 so I refactored and it works just fine.

我只想把它写在ES6中，因为其他的都是，但是这让我很困惑。

I just want to write it in ES6 because everything else is but this has stumped me.

我在ES5中的组件：

var Parent = React.createClass({
  content: function() {
    return React.Children.map(this.props.children, function(child) {
     return React.cloneElement(child, {
       passThisFunc: this.passThisFunc
     })
    }.bind(this));
  },

  passthisfunc: function(component) {
    // returns the components props
    console.log(this);

    // Returns the component so I can do component.props.name
    console.log(component);
  },

  render: function() {
    return (
      <div>
        { this.content }
      </div>
    )
  }
});

然后在其孩子中：

var Child = React.createClass({
  componentDidMount: function() {
    this.props.passThisFunc(this);
  }

  render: function().....
});

组件在ES6中没有什么不同，当

The components are not that different in ES6, it is really what is referenced when this is logged.

对于重构（特别是父组件）的任何帮助将不胜感激。

Any help in refactoring (especially the parent component) would be greatly appreciated.

修改
这是我尝试的ES6示例：

Edit Here is the ES6 Example I tried:

class Parent extends React.Component {
  content() {
    return React.Children.map(this.props.children, function(child) {
     return React.cloneElement(child, {
       passThisFunc: this.passThisFunc
     })
    }.bind(this));
  }

  passthisfunc(component) {
    // returns the components props
    console.log(this);

    // Returns the component so I can do component.props.name
    console.log(component);
  }

  render() {
    return (
      <div>
        { this.content }
      </div>
    )
  }
};

class Child extends React.Component {
  componentDidMount() {
    this.props.passThisFunc(this);
  }

  render(){...}
};

推荐答案

自动绑定 React.createClass 的功能是已被删除 ES6课程（另见本文）。所以你现在需要手动执行：

The autobinding that React.createClass did feature was removed for ES6 classes (see also this article). So you'll have to do it manually now:

…
  content: function() {
    return React.Children.map(this.props.children, function(child) {
     return React.cloneElement(child, {
       passThisFunc: this.passThisFunc.bind(this)
     })
    }.bind(this));
  },
…

---

此绑定：

class Parent extends React.Component {
  constructor() {
    super();
    this.passthisfunc = (component) => {
      // returns the parent
      console.log(this);

      // Returns the component so I can do component.props.name
      console.log(component);
    };
  }
  content() {
    return React.Children.map(this.props.children, child =>
      React.cloneElement(child, {
        passThisFunc: this.passThisFunc
      });
    );
  }
  …
}

这篇关于React，“this”，cloneElement和es6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！