子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

React 使用 JSX ​

INFO

React 使用 JSX 来替代常规的 JavaScript。JSX 看起来类似 HTML，JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

JSX 是在 JavaScript 内部实现的。与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

1.JSX 优点 ​

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

注意： 由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

2.React JSX 语法 ​

要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上。

2.1. JSX 花括号 ​

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

javascript
ReactDOM.render(
  <div>
    <h1>{1 + 1}</h1>
  </div>,
  document.getElementById("app")
);

2.2. JSX 三元运算 ​

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

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

2.3. JSX 内联样式 ​

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

JavaScript
const myStyle = {
  fontSize: 100,
  color: "#FF0000",
};
ReactDOM.render(
  <h1 style={myStyle}>ReactJSX</h1>,
  document.getElementById("app")
);

2.4. JSX 注释 ​

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

javascript
ReactDOM.render(
  <div>
    <h1>ReactDOM</h1>
    {/*注释...*/}
  </div>,
  document.getElementById("app")
);

2.5. JSX 插入数组 ​

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

javascript
const arr = ["React", "ReactDom"];
const List = arr.map((o, i) => <li key={i}>{o}</li>);
ReactDOM.render(<ul>{List}</ul>, document.getElementById("app"));

代码与演示 ​

1. 全部代码 ​

点击查看代码
html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test-react-jsx</title>
    <!-- <script src="https://cdn.staticfile.org/react/18.0.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.0.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.js"></script>
  </head>

  <body>
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>
    <div id="app4"></div>
    <div id="app5"></div>

    <script type="text/babel">
      (function () {
        // 案例: 1. JSX 花括号
        ReactDOM.render(
          <div>
            <h1>{1 + 1}</h1>
          </div>,
          document.getElementById("app1")
        );
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 2. JSX 三元运算
        const i = 1;
        ReactDOM.render(
          <div>
            <h1>{i == 1 ? "True!" : "False"}</h1>
          </div>,
          document.getElementById("app2")
        );
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 3. JSX 内联样式
        const myStyle = {
          fontSize: 20,
          color: "#FF0000",
        };
        ReactDOM.render(
          <h1 style={myStyle}>ReactJSX</h1>,
          document.getElementById("app3")
        );
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 4. JSX 注释
        ReactDOM.render(
          <div>
            <h1>ReactDOM</h1>
            {/*注释...*/}
          </div>,
          document.getElementById("app4")
        );
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 5. JSX 插入数组
        const arr = ["React", "ReactDom"];
        const List = arr.map((o, i) => <li key={i}>{o}</li>);
        ReactDOM.render(<ul>{List}</ul>, document.getElementById("app5"));
      })();
    </script>
  </body>
</html>

2. 案例演示 ​




test-react-jsx.html 资源加载中...