Question

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

以下是常规JavaScript中的代码使其工作，在第一次在ES6中编写它并在键盘上敲我的头后我决定看看它是否是ES6所以我重构并且它工作得很好。

我只是想在ES6中写它，因为其他一切都是，但这让我很难过。

这是我在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中的组件没有那么不同，它实际上是记录this时引用的内容。

非常感谢任何重构方面的帮助（特别是父组件）。

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

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

React.createClass … content: function() { return React.Children.map(this.props.children, function(child) { return React.cloneElement(child, { passThisFunc: this.passThisFunc.bind(this) }) }.bind(this)); }, …为ES6课程提供了autobinding功能（另请参阅was removed）。所以你现在必须手动完成：

this

但是你不会在ES6中真正做到这一点。相反，你首先使用箭头函数，它具有词法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 }); ); } … }绑定：

var range = req.headers.range;
var total = data.length;// your video size.. you can use fs.statSync("filename").size to get the size of the video if it is stored in a file system 
split = range.split(/[-=]/),
ini = +split[1],
end = split[2]?+split[2]:total-1,
chunkSize = end - ini + 1;

res.writeHead(206, {
    "Content-Range": "bytes " + ini + "-" + end + "/" + total,
    "Accept-Ranges": "bytes",
    "Content-Length": chunkSize,
    "Content-Type": // check mimeType
});

React，＆＃34; this＆＃34;，cloneElement和es6

1 个答案: