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

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

<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传递为B

的道具

    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>
            );
        }
    });

React

2 个答案: