在 JSX 的 tag 属性值中,用 {}
包裹起来的代码就是 JavaScript Expression:
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
除了可以写正常的 JS 代码,还可以嵌入其他的 component class:
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
甚至可以调用函数(看下文的 renderAdminMenu
):
// ...
const renderAdminMenu = function() {
return (<MenuLink to="/users">User accounts</MenuLink>)
}
// ...
const userLevel = this.props.userLevel;
return (
<ul>
<li>Menu</li>
{userLevel === 'admin' && renderAdminMenu()}
</ul>
)
用 Spread 语义 (...
) 传递参数
React 借鉴了 ES6 新加的 Spread Syntax 表示属性值的传递(准确地说 ES6 只支持了 Array 部分,Object 部分还在提议中):
function FancyCheckbox(props) {
var { checked, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` contains { onClick: console.log } but not the checked property
return (
<div {...other} className={fancyClass} />
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
</FancyCheckbox>,
document.getElementById('example')
);
它的功能类似 Python 的 unpacking,但是语法和功能上不一样。官方文档 JSX Spread Attributes 有一些简单的描述。