[解決済み] Reactjs: 親から動的な子コンポーネントの状態やプロップを変更するには？

質問

reactでタブを作ろうとしているのですが、いくつか問題があります。

以下はファイルです。 page.jsx

<RadioGroup>
    <Button title="A" />
    <Button title="B" />
</RadioGroup>

ボタンAをクリックしたとき、RadioGroupコンポーネントはボタンBの選択を解除する必要があります。 .

"Selected"は、単に状態またはプロパティからのclassNameを意味します。

ここで RadioGroup.jsx :

module.exports = React.createClass({

    onChange: function( e ) {
        // How to modify children properties here???
    },

    render: function() {
        return (<div onChange={this.onChange}>
            {this.props.children}
        </div>);
    }

});

のソースは Button.jsx は本当に重要ではありません。これは通常の HTML ラジオボタンを持ち、ネイティブ DOM の onChange イベント

予想される流れは

• ボタンquot;A"をクリックします。
• ボタン "A"をクリックすると、onChange というネイティブ DOM イベントが発生し、RadioGroup にバブルアップされます。
• RadioGroup の onChange リスナーが呼び出されます。
• RadioGroupはボタンBの選択を解除する必要があります。 . これは私の質問です。

私が遭遇している主な問題は次のとおりです。I を動かすことができません。 <Button> を RadioGroup という構造になっているため、子プロセスは 任意 . つまり、マークアップは

<RadioGroup>
    <Button title="A" />
    <Button title="B" />
</RadioGroup>

または

<RadioGroup>
    <OtherThing title="A" />
    <OtherThing title="B" />
</RadioGroup>

いくつか試してみました。

試してみました。 で RadioGroup のonChangeハンドラで。

React.Children.forEach( this.props.children, function( child ) {

    // Set the selected state of each child to be if the underlying <input>
    // value matches the child's value

    child.setState({ selected: child.props.value === e.target.value });

});

問題あり。

Invalid access to component property "setState" on exports at the top
level. See react-warning-descriptors . Use a static method
instead: <exports />.type.setState(...)

試行します。 で RadioGroup のonChangeハンドラで。

React.Children.forEach( this.props.children, function( child ) {

    child.props.selected = child.props.value === e.target.value;

});

問題あり。 を与えても何も起こりません。 Button クラスに componentWillReceiveProps メソッド

試行します。 私は親の状態を更新するだけで子供が自動的に反応するように、親のある特定の状態を子供に渡そうとしました。RadioGroupのrender関数で。

React.Children.forEach( this.props.children, function( item ) {
    this.transferPropsTo( item );
}, this);

問題あり。

Failed to make request: Error: Invariant Violation: exports: You can't call
transferPropsTo() on a component that you don't own, exports. This usually
means you are calling transferPropsTo() on a component passed in as props
or children.

悪い解決策その1 : react-addons.jsを使用する。 クローンウィズプロップス メソッドでレンダリング時に子プロセスをクローンします。 RadioGroup でクローンを作成し、プロパティとして渡すことができます。

悪い解決策その2 : HTML / JSXの周りに抽象化を実装し、動的にプロパティを渡すことができるようにする（私を殺す）。

<RadioGroup items=[
    { type: Button, title: 'A' },
    { type: Button, title: 'B' }
]; />

そして RadioGroup で、これらのボタンを動的に構築します。

この質問 は私の助けになりません。なぜなら、私は自分の子供が何であるかを知らずにレンダリングする必要があるからです。

どのように解決するには？

を使うというのはよくわかりません。 cloneWithProps を使用することが悪い解決策であると言う理由はわかりませんが、これを使用した作業例を示します。

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

var App = React.createClass({
    render: function() {
        return (
            <Group ref="buttonGroup">
                <Button key={1} name="Component A"/>
                <Button key={2} name="Component B"/>
                <Button key={3} name="Component C"/>
            </Group>
        );
    }
});

var Group = React.createClass({
    getInitialState: function() {
        return {
            selectedItem: null
        };
    },

    selectItem: function(item) {
        this.setState({
            selectedItem: item
        });
    },

    render: function() {
        var selectedKey = (this.state.selectedItem && this.state.selectedItem.props.key) || null;
        var children = this.props.children.map(function(item, i) {
            var isSelected = item.props.key === selectedKey;
            return React.addons.cloneWithProps(item, {
                isSelected: isSelected,
                selectItem: this.selectItem,
                key: item.props.key
            });
        }, this);

        return (
            <div>
                <strong>Selected:</strong> {this.state.selectedItem ? this.state.selectedItem.props.name : 'None'}
                <hr/>
                {children}
            </div>
        );
    }

});

var Button = React.createClass({
    handleClick: function() {
        this.props.selectItem(this);
    },

    render: function() {
        var selected = this.props.isSelected;
        return (
            <div
                onClick={this.handleClick}
                className={selected ? "selected" : ""}
            >
                {this.props.name} ({this.props.key}) {selected ? "<---" : ""}
            </div>
        );
    }

});


React.renderComponent(<App />, document.body);

ここでは jsFiddle を実行したところです。

EDIT : 動的なタブの内容を含む、より完全な例です。 jsFiddle