Question

我有以下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未定义时）。我该怎么做？

Answer 1

在初始状态下，只需设置

即可

isUserSignedIn: false

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

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

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

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

调用兄弟组件

1 个答案: