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

Question

例如下面的例子：

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来挂载子组件的，这时候要传递一个事件是不是就弄不了了？还是说打算这样传事件的想法就是错的？需要借助一些别的工具么？

Answer 1

使用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>
    )
  }
}

Answer 2

App是什么，似乎你的理解它是一个父组件。

但App的作用跟真实的父组件有所不同，在app组件中，不需要有额外的事件函数，只是一个this.props.children。

而你写的groups路由和users路由，就是真正意义上的父组件，这2个父组件可以导入子组件，可以向组件传递事件，父子组件可以互相通信。

class Groups extends React.Component {
//妈妈告诉我，我是父组件，你不要认错哦

    handleSubClick(){
        console.log("这个事件是由子组件触发调用的");
    }
  render () {
    return (
      <div>
          <子组件 handleSubClick={() => this.handleSubClick()} />
      </div>
    )
  }
}

class 子组件 extends React.Component {
//妈妈告诉我，我是子组件，爸爸又一个handleSubClick方法，我想点击调用，通过props获取爸爸的方法。
    render() {
        return (
            <span onClick={this.props.handleSubClick}></span>
        )
    }
}

Answer 3

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

这样试试呢？

Answer 4

https://github.com/ReactTrain... 官网这个demo就是父组件向子组件传递事件

Answer 5

react-router创始的起点，我理解应该是为了组件的相互跳转，而你这个组件的通信似乎是react应该干的事情，并不是react－router该干的事情。所以你要通信传递方法还是应该用react的通信，如一楼所有，所谓各司其职嘛

Answer 6

用cloneElement。
http://www.cnblogs.com/darren...