React 中的嵌套组件

Question

我有 3 级嵌套组件。 Html 结构如下所示。 C 和 D 的渲染节点/元素需要从 Main 访问状态和自定义函数，但 C 和 D 在 B 元素内。我不确定这是否是构建组件的最佳方式。此外，如何将状态和自定义函数从 Main 传递给孙子 C 和 D 的渲染节点/元素？

<div id="Main">
    <div class="A"></div>

    <div class="B">
        <div class="C"></div>
        <div class="D"></div>
    </div>
</div>

我的尝试：

var Main = React.createClass({
    render: function(){
        return (
            <div className="Main">
                <A/>
                <B /> 
            </div>
        );
    }
});


// Putting C, D into B, but C,D both need to access state from Main. 
var B = React.createClass({
    render: function(){
        return (
            <div className="B">
                <C />
                <D />
            </div>
        );
    }
});
var C =....;
var D =....;

React.render(<Main />, document.body)

Answer 1

我不确定是否有直接访问子组件状态的方法。但是你可以使用 ref。

<Field ref="field1"/>

然后就可以使用了

this.refs.field1.state

你的情况：

var B = React.createClass({
    render: function(){
        return (
            <div>
                <C ref = "c1"/>
                <D ref = "d1"/>
            </div>
        );
    }
});

但不建议这样做link

Answer 2

你可以将 Main 中的 state 作为 B 的 props 传递

    var Main = React.createClass({

        getInitialState:function(){
            return {mainState:"Main state"}
        }
        render: function(){
            return (
                <div>
                   <A/>
                    <B mainState={this.state.mainState}/> 
                </div>
            );
        }

   });


    // Putting C, D into B, but C,D both need to access state from Main.



    var B = React.createClass({
     propTypes:{mainState:React.PropTypes.string}     
     render: function(){

          return (
                <div>
                    {this.props.mainState}// The state from main is received as propps in child component
                    <C mainState={this.props.mainState}/>// Now youcan access mainState a props of C
                    <D />
                </div>
            );
        }
    });