react onClick自執行問題

寫元件的時候發現子元件的onClick方法自動執行了，程式碼如下:

let columns=[
{
  title:"姓名",
  width:"150",
  dataIndex:"name"
},
{
  title:"年齡",
  width:"150",
  dataIndex:"age"
},
{
  title:"選單許可權",
  width:"150",
  dataIndex:"menuConfig",
  //render=(text,record)=>{
   //return(
   //<div onClick={this.detail(record)}>  
     // 選單配置
  // </div>
  //)
}
]
//發現onclick竟然自己執行了
columns[2].render=(text,record)=>{
   return(
   <div onClick={this.detail(record)}>
      選單配置
   </div>
  )
}

detail=(record)=>{
  this.props.history({pathname:"/menuConfig",state:record})
}

找了很久都沒找到原因，最後改變了一下寫法就好了，解決方案如下：

let columns=[
{
  title:"姓名",
  width:"150",
  dataIndex:"name"
},
{
  title:"年齡",
  width:"150",
  dataIndex:"age"
},
{
  title:"選單許可權",
  width:"150",
  dataIndex:"menuConfig",
  //render=(text,record)=>{
   //return(
   //<div onClick={this.detail(record)}>  
     // 選單配置
  // </div>
  //)
}
]
//發現onclick竟然自己執行了
columns[2].render=(text,record)=>{
   return(
  //方式一：繫結一個函式在函式內部呼叫
   <div onClick={()=>this.detail(record)}>
      選單配置
   </div>

   //方式二：用bind繫結
   <div onClick={this.detail.bind(this,record)}>
      選單配置
   </div>
  )
}

detail=(record)=>{
  this.props.history({pathname:"/menuConfig",state:record})
}