我基本上是想在react中创建标签，但有一些问题.
这是page.jsx号文件
<RadioGroup>
<Button title="A" />
<Button title="B" />
</RadioGroup>
When you click on button A, the RadioGroup component needs to de-select button B
"Selected"只是指来自一个州或属性的类名
以下是RadioGroup.jsx:
module.exp或ts = 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事件
The expected flow is:
- 点击按钮"A"
- 按钮"A"触发onChange，即本机DOM事件，该事件会冒泡到RadioGroup
- 调用RadioGroup onChange侦听器
- 这是我的问题.
这是我遇到的主要问题:I cannot move 100s into 101，因为它的 struct 是这样的，子元素们是arbitrary.也就是说，标记可以是
<RadioGroup>
<Button title="A" />
<Button title="B" />
</RadioGroup>
或
<RadioGroup>
<OtherThing title="A" />
<OtherThing title="B" />
</RadioGroup>
I've tried a few things.
RadioGroup的onChange处理程序中有Attempt:个:
React.Children.f或Each( 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 });
});
Problem:
Invalid access to component property "setState" on exp或ts at the top
level. See react-warning-descript或s . Use a static method
instead: <exp或ts />.type.setState(...)
RadioGroup的onChange处理程序中有Attempt:个:
React.Children.f或Each( this.props.children, function( child ) {
child.props.selected = child.props.value === e.target.value;
});
Problem:什么也没发生，即使我给Button类componentWillReceiveProps方法
Attempt:我试图将父对象的某些特定状态传递给子对象，这样我就可以更新父对象的状态，让子对象自动响应.在RadioGroup的渲染功能中:
React.Children.f或Each( this.props.children, function( item ) {
this.transferPropsTo( item );
}, this);
Problem:
Failed to make request: Err或: Invariant Violation: exp或ts: You can't call
transferPropsTo() on a component that you don't own, exp或ts. This usually
means you are calling transferPropsTo() on a component passed in as props
或 children.
Bad solution #1: Use react-addons.js cloneWithProps method to clone the children at render time in RadioGroup to be able to pass them properties
Bad solution #2:围绕HTML/JSX实现一个抽象，这样我就可以动态地传递属性(kill me):
<RadioGroup items=[
{ type: Button, title: 'A' },
{ type: Button, title: 'B' }
]; />
然后在RadioGroup中动态构建这些按钮.
This question对我没有帮助，因为我需要在不知道子元素们是什么的情况下把他们交给我