JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

React 实例

ReactDOM.render(    <div>      <h1>{1+1}</h1>    </div>    ,    document.getElementById('example'));

尝试一下 »

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.

React 实例

ReactDOM.render(    <div>      <h1>{i == 1 ? 'True!' : 'False'}</h1>    </div>    ,    document.getElementById('example'));

尝试一下 »

样式

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

React 实例

var myStyle = {    fontSize: 100,    color: '#FF0000'};ReactDOM.render(    <h1 style = {myStyle}>菜鸟教程</h1>,    document.getElementById('example'));

尝试一下 »

注释

注释需要写在花括号中，实例如下：

React 实例

ReactDOM.render(    <div>    <h1>菜鸟教程</h1>    {/*注释...*/}     </div>,    document.getElementById('example'));

尝试一下 »

数组

JSX 允许在模板中插入数组，数组会自动展开所有成员：

React 实例

var arr = [  <h1>菜鸟教程</h1>,  <h2>学的不仅是技术，更是梦想！</h2>,];ReactDOM.render(  <div>{arr}</div>,  document.getElementById('example'));

尝试一下 »