Reactjs：如何從父級修改動態子組件狀態或道具？

Question

我基本上是在嘗試制作標簽以做出反應，但存在一些問題。

這是文件page.jsx

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

當您單擊按鈕 A 時， RadioGroup 組件需要取消選擇按鈕 B 。

“選定”僅表示來自狀態或屬性的類名

這是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事件

預期流量為：

• 單擊按鈕“A”
• 按鈕“A”觸發 onChange，原生 DOM 事件，它向上冒泡到 RadioGroup
• RadioGroup onChange 監聽器被調用
• RadioGroup 需要取消選擇按鈕 B 。 這是我的問題。

這是我遇到的主要問題：我不能將<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 的渲染函數中：

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 cloneWithProps方法在RadioGroup渲染時克隆子項，以便能夠傳遞它們的屬性

糟糕的解決方案#2 ：圍繞 HTML/JSX 實現抽象，以便我可以動態傳遞屬性（殺了我）：

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

然后在RadioGroup動態構建這些按鈕。

這個問題對我沒有幫助，因為我需要在不知道他們是什么的情況下渲染我的孩子

Answer 1

我不確定你為什么說使用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，展示了它的實際效果。

編輯：這是一個更完整的動態標簽內容示例： jsFiddle

Answer 2

按鈕應該是無狀態的。 而不是顯式更新按鈕的屬性，只需更新組自己的狀態並重新渲染。 Group 的 render 方法應該在渲染按鈕時查看它的狀態，並將“active”（或其他東西）傳遞給活動按鈕。

Answer 3

也許我的是一個奇怪的解決方案，但為什么不使用觀察者模式？

RadioGroup.jsx

module.exports = React.createClass({
buttonSetters: [],
regSetter: function(v){
   buttonSetters.push(v);
},
handleChange: function(e) {
   // ...
   var name = e.target.name; //or name
   this.buttonSetters.forEach(function(v){
      if(v.name != name) v.setState(false);
   });
},
render: function() {
  return (
    <div>
      <Button title="A" regSetter={this.regSetter} onChange={handleChange}/>
      <Button title="B" regSetter={this.regSetter} onChange={handleChange} />
    </div>
  );
});

按鈕.jsx

module.exports = React.createClass({

    onChange: function( e ) {
        // How to modify children properties here???
    },
    componentDidMount: function() {
         this.props.regSetter({name:this.props.title,setState:this.setState});
    },
    onChange:function() {
         this.props.onChange();
    },
    render: function() {
        return (<div onChange={this.onChange}>
            <input element .../>
        </div>);
    }

});

也許你需要別的東西，但我發現這非常強大，

我真的更喜歡使用為各種任務提供觀察者注冊方法的外部模型

Answer 4

創建一個對象，充當父子之間的中間人。 此對象包含父級和子級中的函數引用。 然后該對象作為道具從父級傳遞給子級。 代碼示例在這里：

https://stackoverflow.com/a/61674406/753632