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

89

我实质上是想让标签页做出反应，但是有一些问题。

这是档案 page.jsx

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

当你点击按钮A，在RadioGroup中组件需要去选择按钮B。

“选择”仅表示来自状态或属性的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并不重要，它有一个触发原始DOM onChange事件的常规HTML单选按钮

预期流量为：

  • 点击按钮“ A”
  • 按钮“ A”触发本地DOM事件onChange，该事件一直持续到RadioGroup
  • 调用RadioGroup onChange侦听器
  • RadioGroup中需要去选择按钮B。这是我的问题。

这是我遇到的主要问题：我无法<Button>进入RadioGroup，因为s的结构使得子级是任意的。也就是说，标记可能是

<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动态建立这些按钮。

这个问题对我没有帮助，因为我需要渲染我的孩子而又不知道他们是什么

reactjs 
— 安迪·雷（Andy Ray）
source
如果孩子可以是任意的，那么怎么RadioGroup可能知道需要对任意孩子的事件做出反应？它必须一定了解有关其子级的信息。
— 罗斯·艾伦
1
通常，如果您要修改您不拥有的组件的属性，请使用对其进行克隆，React.addons.cloneWithProps然后传递您想要的新道具。props是不可变的，因此您要创建一个新的哈希，将其与当前道具合并，并将新的哈希传递props给子组件的新实例。
— 罗斯·艾伦

Answers:

41

我不确定为什么您会说使用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

— 克劳德·普雷考特
source
15
注意：不建议使用cloneWithProps。使用React.cloneElement代替。
— 陈津林
8
要执行D3 / Jquery仅使用：not选择器就可以执行的操作，这是如此难以置信的复杂this。除了使用React之外，还有什么真正的优势？
— 以示例方式学习统计数据（
仅供参考。这不是“从父状态更新子状态”，这是子在更新父状态以更新子状态。此处的用语有所不同。万一这使人困惑。
— sksallaj '16
1
@Incodeveritas，您说得对，兄弟姐妹的关系，父母与子女以及父母与子女的关系有点复杂。这是一种模块化的处理方式。但是请记住，JQuery是快速完成工作的技巧，ReactJS根据业务流程来保持工作。
— sksallaj
18

按钮应该是无状态的。无需显式更新按钮的属性，只需更新组自身的状态并重新渲染即可。然后，在渲染按钮时，Group的render方法应该查看其状态，并将“活动”（或某些内容）仅传递给活动按钮。

— 里古
source
要展开，应从父级设置按钮onClick或其他相关方法，以便任何操作都可以回调到父级以在那里设置状态，而不是在按钮本身中。这样，按钮只是父母当前状态的无状态表示。
— DavidMårtensson18年
6

也许我的解决方案很奇怪，但是为什么不使用观察者模式呢？

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

});

也许您还需要其他东西，但是我发现它非常强大，

我真的更喜欢使用外部模型来为各种任务提供观察者注册方法

— Daniele Cruciani
source
一个节点在另一个节点上显式调用setState不好吗？一种更具反应性的方法是更新RadioGroup上的某些状态，触发另一个渲染过程，您可以在其中根据需要更新后代的道具？
— 2015年
1
明确地？不，观察者只是调用一个回调，它恰好是setState，但实际上我可以指定this.setState.bind（this），因此可以完全绑定到自身。好吧，如果我要说实话，我应该定义一个调用setState的局部函数/方法，并将其注册到观察者中
— Daniele Cruciani 2015年
1
我读错了吗，还是在一个对象中有两个名称相同的字段Button.jsx？
— 约翰·约翰逊
Button.jsx包括onChange()和onChange(e)
— 约什-
删除第一个，即从问题（第一个问题）中剪切并粘贴。这不是重点，这也不是工作代码，也不是。
— Daniele Cruciani
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.