Javascript “反应”；这",；，克隆元素与es6

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

此

引用子组件而不是父组件

下面是用常规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>
    )
  }
});

ES6中的组件没有那么大的不同，它实际上是记录此时引用的组件

任何重构方面的帮助（尤其是父组件）都将不胜感激

编辑 以下是我尝试过的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(){...}
};

类父级扩展React.Component{
内容（）{
返回React.Children.map（this.props.Children，函数（child））{
返回React.cloneElement（子级{
passThisFunc:this.passThisFunc
})
}.约束（这个）；
}
passthisfunc（组件）{
//返回组件道具
console.log（this）；
//返回组件，以便我可以执行component.props.name
控制台日志（组件）；
}
render（）{
返回(
{this.content}
)
}
};
子类扩展了React.Component{
componentDidMount（）{
this.props.passThisFunc（this）；
}
render（）{…}
};

React.createClassdid功能用于ES6类（另请参见）。因此，您现在必须手动执行此操作：

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

---

但在ES6中你不会真的这么做。相反，您应该首先使用arrow函数，它具有词法

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

---

您能修复

内容中的语法错误吗

？ES6不会改变

的工作方式。如果不是
child.props
，您希望
这个
有什么价值？我在
内容
中的内容基本上与我在当前实现中的内容相同，并且工作正常，语法错误是什么？关于你的第二个问题，我想做一些类似的事情：
this.setState（{test:'test'}）
所以我想它应该是
this
与ES5中的父组件相等

第一个属性用

；

分隔，而不是逗号，第二个属性完全忽略了逗号。很好的调用，谢谢。它已更新。注意：每次渲染时，箭头函数都会重新创建函数-这是一个微性能命中，需要与更干净的语法进行权衡。@AshleyCoolman仅当在

渲染中声明时。

（或它调用的方法），我还没有完成

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