react.js - 使用react-router之后，如何向子组件传递一个事件handler？

问题描述

问 题

例如下面的例子：

const routes = (
  <Route component={App}>
    <Route path="groups" component={Groups}/>
    <Route path="users" component={Users}/>
  </Route>
)

class App extends React.Component {

  //想要传递的事件
 handleSubClick(){
    console.log("这个事件是由子组件触发调用的");
}

  render () {
    return (
      <div>
        {/* 这会是 <Users> 或 <Groups> */}
        {this.props.children}
      </div>
    )
  }
}

class Groups extends React.Component {
  render () {
    return (
     {/*这里期待去调用父组件传下来的事件*/}
      <div onClick={this.props.handleSubClick}>
      </div>
    )
  }
}

可以看到App组件中，是使用this.props.children来挂载子组件的，这时候要传递一个事件是不是就弄不了了？还是说打算这样传事件的想法就是错的？需要借助一些别的工具么？

解决方案

使用cloneElement才是正确的姿势：

const routes = (
  <Route component={App}>
    <Route path="groups" component={Groups}/>
    <Route path="users" component={Users}/>
  </Route>
)

class App extends React.Component {

  //想要传递的事件
 handleSubClick(){
    console.log("这个事件是由子组件触发调用的");
 }

  render () {
    return (
      <div>
        {/* 这会是 <Users> 或 <Groups> */}
        {this.props.children && React.cloneElement(this.props.children, {
              handleSubClick: this.handleSubClick
        })}
      </div>
    )
  }
}

class Groups extends React.Component {
  render () {
    return (
     {/*这里期待去调用父组件传下来的事件*/}
      <div onClick={this.props.handleSubClick}>
      </div>
    )
  }
}

这篇关于react.js - 使用react-router之后，如何向子组件传递一个事件handler？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！