reactjs

Reactで子要素を渡せるコンポーネントを作りたい

More than 3 years have passed since last update.

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

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

Screen Shot 2015-02-14 at 11.01.10 PM.png

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

こんな感じになった。

http://jsfiddle.net/hokaccha/a95sjyqz/

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はあんまり使いたい場面が思い浮かばないって書いてあるのでもっといい方法があるのではと思っている。

http://qiita.com/koba04/items/9709510cc68256557f2e#clonewithprops