Question

我本质上是想做出反应，但有一些问题。

这是文件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事件

预期流量为：

点击按钮“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动态构建这些按钮。

This question对我没有帮助，因为我需要让我的孩子不知道他们是什么

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自己的状态并重新渲染。然后，群组的渲染方法应该在渲染按钮时查看其状态并通过＆＃34; active＆＃34; （或其他东西）只对活动按钮。

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>
  );
});

Button.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

Reactjs：如何从父级修改动态子组件状态或道具？

4 个答案: