在父母的DOM中显示孩子状态的正确方法

时间:2016-05-21 03:15:54

标签: reactjs flux

考虑使用这样的子组件:

class ChildCmp extends React.Component
{
    constructor() {
        this.state = { title: 'Child Component', data: 'Some data' };
    }

    render() {
        return (<div>{this.state.data}</div>);
    }
}

在我的场景中,我可以使用上面提到的不同类型的子组件。我还得到了以下父组件:

class ParentCmp extends React.Component
{
    constructor() {
        this.state = { childCmps: [(<ChildCmp />)] };
    }

    render() {
        return (
            <div>
                {this.state.childCmps.map(function(cmp) {
                    return (
                        <span>Title: ...
                            {cmp}
                        </span>
                    );
                })}
            </div>
        );
    }
}

我希望将子组件的标题从其内部状态中删除,并将其显示在父组件的DOM中。我知道我可以在孩子自己的DOM中显示标题,但这样我必须在每个不同类型的孩子中冗余地设计一个全局框架。我宁愿不这样做!

如何从父母那里访问孩子的内心状态?

0 个答案:

没有答案