React，“this”，cloneElement和es6

Question

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.

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.

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

This is my component in 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>
    )
  }
});

And then in its children:

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

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

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.

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(){...}
};

Answer 1

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

---

But you wouldn't really do this in ES6. Rather, you'd use an arrow function in the first place, which features a lexical this binding:

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