Reactjs：如何修改子状态或道具从父？
|
我基本上试图使选项卡在反应，但有一些问题。
这里是文件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” 这里是我遇到的主要问题：我不能移动< Button> s到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 http://fb.me/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的render函数中： 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不帮助我，因为我需要渲染我的孩子，而不知道他们是什么
我不知道为什么你说使用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 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |