Reactでこんな感じのやつを作りたい。

jsx

<ButtonGroup selected={this.state.selected} onSelect={this.onSelect}>
  <Button>foo</Button>
  <Button>bar</Button>
  <Button>baz</Button>
</ButtonGroup>

ButtonにButtonGroupからpropsを指定するためのいい方法がイマイチわからないんだけど、React Bootstrapとかのコード読んでるとcloneWithPropsで複製してpropsを渡してるみたいだった。

こんな感じになった。

var ButtonGroup = React.createClass({
  onSelect: function(index) {
    this.props.onSelect(index);
  },
  render: function() {
    var children = this.props.children.map(function(child, i) {
      return React.addons.cloneWithProps(child, {
        key: i,
        index: i,
        onClick: this.onSelect,
        selected: +this.props.selected === i,
      });
    }, this);

    return <div className="btnGroup">{children}</div>;
  }
});

var Button = React.createClass({
  onClick: function() {
    this.props.onClick(this.props.index);
  },
  render: function() {
    var cls = this.props.selected ? 'btn selected' : 'btn';
    return <span className={cls} onClick={this.onClick}>{this.props.children}</span>;
  }
});

でも @koba04 さんの記事にcloneWithPropsはあんまり使いたい場面が思い浮かばないって書いてあるのでもっといい方法があるのではと思っている。