Question

阅读React教程和文档，找不到有关在子组件<a onClick="{function(){ this.props.handleClick...中进行但在父组件中声明的操作的任何信息。

什么时候应该这样做？为什么不在子组件中做所有的事情？我们有Redux，Flux，但人们每天都这样做，为什么？

（使用父组件的示例）

var SongList = React.createClass({
  logTrack: function(track) {
    console.log(track)
  }

  render: function () {
    var trackNodes = this.props.data.map(function(track, i) {
      return (
        <Song
          key={i} 
          handleClick={(val) => this.logTrack(val)} // pass function through props
         >
          {track}
        </Song>
      );
    });

    return (
      <div className="row">
        {trackNodes}
      </div>
    );
  }
})

var Song = React.createClass({
  render: function () {
    <a onClick={ function () { this.props.handleClick('some value') }>
      {this.props.children}
    </a>
  }
})

Answer 1

这里没有具体的行动，它归结为关注点和你的应用程序中有意义的事物。通常，儿童/哑巴组件将不知道如何处理被点击的内容。这是一个更适合父母的工作。例如，如果您有一个项目列表（父项），列表项（子项）通常只是想通知父项他们被点击。父级是管理列表状态的父级，因此父级可能希望将其他项标记为已选择（多选），或者可能要取消选择上一个选择并将新项标记为已选（单选）。让子组件了解所有同伴以实现这一点是不合理的。

在父组件中反应HandleClick

1 个答案: