JSX: JavaScript Expression

20th August 2020 at 2:19pm
JSX

在 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 有一些简单的描述。