调用兄弟组件答案

【问题标题】：Calling sibling component调用兄弟组件
【发布时间】：2016-10-11 12:45:42
【问题描述】：

我有以下 HTML 结构：

我在网站加载时加载了一个Content 组件：

ReactDOM.render(React.createElement(Content), document.getElementById('content'));

在这个组件内部，我想用一些道具将另一个组件放入导航 div，例如：

var Content = React.createClass({

    getInitialState: function () {
        return {
            isUserSignedIn: this.isUserSignedIn(),
            role: undefined
        };
    },

    isUserSignedIn: function () {
        return UserService.isSignedIn();
    },

    setIsUserSignedIn: function () {
        this.setState({
            isUserSignedIn: this.isUserSignedIn()
        });
    },

    render: function () {
        if (this.state.isUserSignedIn === false) {
            return React.createElement(UserSignIn, {setIsUserSignedIn: this.setIsUserSignedIn});
        } else {
            if (this.state.role !== undefined) {
                ReactDOM.render(
                    React.createElement(Navigation),
                    {role: this.state.role},
                    document.getElementById('navigation')
                );
            }
            return React.createElement('div', {}, '');
        }
    }

});

然而，这会引发一个错误，即我无法在 ReactDOM.render 方法中使用道具（当 role 未定义时）。我该怎么做？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在你的初始状态，只需设置

isUserSignedIn: false

你的 render() 函数应该使用 JSX 来创建组件（而不是 React.createElement）。这些组件必须包含在您的父组件中，并引用其 js 文件，例如

 var Navigation = require('./Navigation');

您正在将 setIsUserSignedIn 函数从父组件传递给子组件。从您的代码中不清楚

UserService.isSignedIn()

被定义和调用。

render: function () {
    if (this.state.isUserSignedIn === false) {
        return (<UserSignIn setIsUserSignedIn={this.setIsUserSignedIn} />);
    } else {
        if (this.state.role !== undefined) {
            return( <div id="navigation">
                       <Navigation role={this.state.role}/>
                     </div>
        }  else
           return (<div></div> )
        }
    }
}

【讨论】：