JSX 语法

Reactjs

JSX 是 React 的核心组成部分，使用 XML 标记直接声明界面，界面组件之间可以互相嵌套。

• JSX 执行更快，在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

JSX 用例：

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

用尖括号 <> 包裹 HTML 代码。

使用的时候可以使用嵌套多个 HTML 标签，但是要包含在一个大容器内：

ReactDOM.render(
    <div>
        <h1>嵌套使用</h1>
        <h2>欢迎学习 React</h2>
        <p data-localAttrubute="someValue">这是一个很不错的 JavaScript 库！</p>
    </div>
    ,
    document.getElementById('example')
);

使用自定义属性要用 data- 前缀。

JavaScript 表达式

在 JSX 中使用 JavaScript 表达式时，用花括号 {} 包裹：

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
    <div>
    {
        names.map(function (name){
            return <div>Hello, {name}!</div>;
        }
    }
    </div>,
    document.getElementById('example')
);

会将 {} 内的表达式执行的结果返回出来，也可以渲染 HTML 标签。

不能在 JSX 中使用 if...else 语句，只可以使用三元运算：

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

如果插入数组，会自动展开所有成员：

var arr = [
    <h1>Hello world!</h1>
    <h2>React is awesome<h2>
];
ReactDOM.render(
    <div>{arr}</div>,
    document.getElementById('example')
);

样式

React 推荐使用内联样式。可以使用驼峰语法设置内联样式，React 会在指定元素数字后自动添加 px：

var myStyle = {
    fontSize: 100,
    color: '#f00'
};
ReactDOM.render(
    <h1 style={myStyle}>内联样式</h1>,
    document.getElementById('example')
);