jsx

Posted 不了无明

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsx相关的知识,希望对你有一定的参考价值。

JSX 执行更快,因为它在编译为 javascript 代码后进行了优化。 它是类型安全的,在编译过程中就能发现错误。

  1. React JSX 代码可以放在一个独立文件
    <script type="text/babel" src="_react.js"></script>
    
    _react.js:
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById(example)
    );
  2. JSX 允许在模板中插入数组,数组会自动展开所有成员
    var arr = [
      <h1>标题</h1>,
      <h2>副标题</h2>,
    ];
    ReactDOM.render(
      <div>{arr}</div>,//代码中嵌套多个 HTML 标签,需要使用一个标签元素包裹它
      document.getElementById(example)
    );
  3. 添加自定义属性需要使用 data- 前缀,由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。React DOM 使用 className 和 htmlFor 来做对应的属性。
  4. React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 
    var myStyle = {
        fontSize: 100,
        color: #FF0000
    };
    ReactDOM.render(
        <h1 style = {myStyle}>菜鸟教程</h1>,
        document.getElementById(example)
    );
  5. 表达式写在花括号 {} 中
  6. 在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代
  7. 注释需要写在花括号中{/*注释...*/}.在标签内部的注释需要花括号在标签外的的注释不能使用花括号
    ReactDOM.render(
        /*注释 */
        <h1>{/*注释*/}</h1>,
        document.getElementById(example)
    );
  8. 要渲染 React 组件,只需创建一个大写字母开头的本地变量。
    var MyComponent = React.createClass({/*...*/});
    var myElement = <MyComponent someProperty={true} />;
    ReactDOM.render(myElement, document.getElementById(example));

     

以上是关于jsx的主要内容,如果未能解决你的问题,请参考以下文章

03代码格式化+高亮

2.ReactJS基础(虚拟DOM,JSX语法)

映射元素中的 JSX 映射元素,相邻的 JSX 元素必须包含在封闭标记中

关于react16.4

github issue 如何写多行代码块

使用 React / JSX 生成非 JavaScript 代码