我是新来的。

我一直在试验react，但对如何使用props传递数组感到困惑。

情况1：

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
                helloworld {this.props.config[0]};
            </div>
            );
    }
});

React.render(<Navigation config={c}/>, document.body);

这正在渲染helloworld程序。这是预期的。

后来我尝试了。

情况2：

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
              {this.props.config} helloworld ;
            </div>
            );
    }
});

React.render(<Navigation config="React"/>, document.body);

这正在渲染React helloworld。由于未定义propType，因此可以预期。

接下来我尝试了。

情况3：

var c = ['program'];
var Navigation = React.createClass({
    getInitialState: function () {
        return {
            openDropdown: -1
        };
    },
    getDefaultProps: function () {
        return {
            config: ['everyone']
        };
    },
    render: function () {
        return (
            <div className="navigation">
                helloworld {this.props.config[0]};
            </div>
            );
    }
});

React.render(<Navigation config=['!!!'] />, document.body);

这没有渲染任何东西。

后来，当我已经改变了React.render(<Navigation config=['!!!'] />, document.body);对React.render(<Navigation config={['!!!']} />, document.body);

它呈现了helloworld！

我已经读过一些教程，大括号用于传递变量，以便JSX知道它们是外部变量。

但是，尽管在调用过程中创建了数组，但case-3为何不使用显式花括号也不起作用，为什么它对于在内联字符串的case-2中起作用呢？

究竟何时使用花括号？

如果有人能指出我关于反应的任何好书或在线教程，这对我会有所帮助。