Question

我在没有插件的情况下在ReactJS上进行导航。我想创建一个主要组件数组。这可能吗？

CoffeeScript的：

Root = React.createClass
    render: ->
        self = this
        <header>
            <nav>
                <ul>
                    {this.props.components.map((comp, i) -> 
                        <li onClick={self.change.bind(self, i)}>{comp.name}</li>
                    )}
                </ul>
            </nav>
            {this.props.components[this.state.active].component}
        </header>

    change: (i) ->
        this.setState({active: i})

    getInitialState: ->
        active: 0

RootComponents = [
    {name: "main", component: React.createClass
        render: ->
            <div>its main</div>
    },
    {name: "conf", component: React.createClass
        render: ->
            <div>its conf</div>}
]


React.render(
    <Root components=RootComponents />, 
    document.getElementById("main")
);

此代码返回项目（main和conf），但不返回组件。

议定编辑： {this.props.components [this.state.active] .component} 至： {React.createElement（this.props.components [this.state.active] .component，null）}

Answer 1

我们通常使用require来获取组件，然后您可以将它们添加到数组并迭代：

Error 411(Length Required) !! 1

这是一个非咖啡的例子..但你明白了。

ReactJS中的组件数组

1 个答案: