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

也许你需要别的东西,但我发现这非常有力,

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