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”
>按钮“A”触发onChange，原生DOM事件，这会触发RadioGroup
> RadioGroup onChange侦听器被调用
> RadioGroup需要取消选择按钮B.这是我的问题。

这里是我遇到的主要问题：我不能移动< 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

Reactjs：如何修改子状态或道具从父？

猜你在找的React相关文章