Reactjs 在构造函数中绑定方法与在React.cloneElement调用中绑定方法有何不同？ import React，{Component}来自“React” 类应用程序扩展组件{ render（）{ 返回( A. B C ) } } 类按钮扩展组件{ 构造函数（）{ 超级（） 此。状态={ 已选择：“无” } } selectItem（已选）{ this.setState（{selected}） } render（）{ 设fn=（子项）=>( 反应。克隆元素（儿童{ //唯一的改变就是调用bind onClick:this.selectItem.bind（this，child.props.value） } ) ) 让items=React.Children.map（this.props.Children，fn） 返回( 您已选择：{this.state.selected} {items} ) } } 导出默认应用程序 import React，{Component}来自“React” 类应用程序扩展组件{ render（）{ 返回( A. B C ) } } 类按钮扩展组件{ 构造函数（）{ 超级（） 此。状态={ 已选择：“无” } //在这里，我在构造函数上添加了绑定。 this.selectItem=this.selectItem.bind（this） } selectItem（已选）{ this.setState（{selected}） } render（）{ 设fn=（子项）=>( 反应。克隆元素（儿童{ //唯一的改变就是调用bind onClick:this.selectItem（child.props.value） } ) ) 让items=React.Children.map（this.props.Children，fn） 返回( 您已选择：{this.state.selected} {items} ) } } 导出默认应用程序

在传递给

React.cloneElement

的回调中添加

此

绑定时，一切正常（第一个代码示例）

但是

在构造函数中添加绑定时，top似乎调用了某种类型的无限循环。我还是不明白为什么？ 这两者的区别是什么

---

两种情况下的差异是传递给

onClick的参数

在第一种情况下

import React , {Component} from 'react'

class App extends Component{
  render(){
    return(
      <Buttons>
        <button value='A'>A</button>
        <button value='B'>B</button>
        <button value='C'>C</button>
      </Buttons>
    )
  }
}


class Buttons extends Component{
  constructor(){
    super()
    this.state= {
      selected: 'none'
    }
    // here I added the binding on the constructor . 
    this.selectItem = this.selectItem.bind(this)
  }

  selectItem(selected){
    this.setState( { selected } )
  }

  render(){
    let fn = (child) => (
      React.cloneElement( child , {
          // this only change is the call to bind here  
          onClick: this.selectItem(child.props.value)
        } 
      )
    )
    let items = React.Children.map(this.props.children , fn)
    return(
      <div>
        <h3>
          you have selected: {this.state.selected}
        </h3>
        {items}
      </div>
    )
  }
}

export default App

您正在将函数传递给
onClick
处理程序

在第二种情况下

onClick: this.selectItem.bind(this,child.props.value)

发生的情况是，您正在调用一个函数，但是
onClick
接收到一个从函数返回的参数，该参数基本上为
null
，因此它产生了一个问题。组件进入无限循环的原因是，您遇到了
onClick:this.selectItem（child.props.value）
，正如我所说的
this.selectItem（child.props.value）
向onClick处理程序返回一个值，而它需要一个函数，因此每次调用
render
时，都会调用该函数作为返回值，并且由于在同一函数中使用
setState
，在状态发生变化后，它将触发重新加载程序，从而进入无限循环
我试图
控制台.log（此）
当在构造函数中进行绑定时，我得到了与在
onClick上绑定时相同的结果，现在有一个奇怪的事情，当在构造函数中绑定时，它会自动调用函数，而我不按任何按钮？添加了一个解释。检查更新的答案
onClick: this.selectItem.bind(this,child.props.value)

onClick: this.selectItem(child.props.value)