我还没react 过来.
我一直在试验react,我被困在如何使用props 通过数组上.
case 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程序.这是意料之中的.
后来我试过了.
case-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);
这是helloworld.这是预期的,因为没有定义propType.
接下来我试过了.
case-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不起作用,因为字符串是内联的.
花括号什么时候用?
如果有人能给我指点任何关于react的好书或在线教程,这会对我有所帮助.