Reactjs：如何修改dynamic子组件状态或从父项道具？
我本质上是试图制定标签反应，但有一些问题。
这里是文件page.jsx
<RadioGroup> <Button title="A" /> <Button title="B" /> </RadioGroup>
当您点击buttonA时，RadioGroup组件需要取消selectbuttonB.
“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的来源并不重要，它有一个触发原生DOM onChange事件的常规HTML单选button
预期的stream程是：
- 点击button“A”
- button“A”触发onChange，本地DOM事件，它起泡到RadioGroup
- RadioGroup onChange监听器被调用
- RadioGroup需要取消selectbuttonB. 这是我的问题。
以下是我遇到的主要问题：我不能将<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的渲染function中：
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.
糟糕的解决scheme＃1 ：使用react-addons.js cloneWithProps方法在RadioGroup中渲染时克隆子级，以便能够传递它们的属性
糟糕的解决scheme＃2 ：围绕HTML / JSX实现抽象，以便可以dynamic传递属性（杀死我）：
<RadioGroup items=[ { type: Button, title: 'A' }, { type: Button, title: 'B' } ]; />
然后在RadioGroupdynamic构build这些button。
这个问题不能帮助我，因为我需要让我的孩子不知道他们是什么
我不知道为什么你说使用cloneWithProps是一个不好的解决scheme，但这里是一个使用它的工作示例。
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显示它的行动。
编辑 ：这是一个更完整的dynamic标签内容的例子： jsFiddle
button应该是无状态的。 不要显式更新button的属性，只需更新组的ow。 状态并重新呈现。 当渲染button时，该组的渲染方法应该查看其状态，并将“活动”（或某物）仅传递给活动button。
也许我的是一个奇怪的解决scheme，但为什么不使用观察者模式？
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>); } });
也许你需要别的东西，但我发现这非常有力，
我真的更喜欢使用外部模型，为各种任务提供观察员注册方法
