【前端知识】React 基础巩固(七)——JSX 的基本语法

React 基础巩固(七)——JSX 的基本语法

JSX 是什么？

• JSX 是一种 JS 的语法扩展（extension），也可以称之为 JavaScript XML，因为看起来就是一段 XML 语法
• 它用于描述我们的 UI 界面，并且其可以和 JS 融合在一起使用
• 它不同于 Vue 中的模块语法，不需要专门学习模块语法中的指令

为什么 React 选择了 JSX？

• React 认为渲染逻辑本质上与其他UI逻辑存在内在耦合

  • 比如 UI 需要绑定事件
  • 比如 UI 中需要展示数据状态
  • 比如在某些状态发生改变时，又需要改变 UI

• 他们之间是密不可分的，所以 React 没有将标记分离到不同的文件中，而是将它们组合到了一起，这个地方就是组件（Component）

JSX 的书写规范

• JSX 的顶层只能有一个根元素，所以通常在外层包裹一个div元素
• 为了方便阅读，通常在 JSX 的外层包裹一个小括号()，并且 JSX 可以进行换行书写
• JSX 中的标签可以是单标签，也可以是双标签（如果是单标签，则必须以/>结尾）

// [书写规范]
// 1.JSX的顶层只能有一个根元素，所以通常在外层包裹一个div元素
// 2.为了方便阅读，通常在JSX的外层包裹一个小括号`()`，并且JSX可以进行换行书写
// 3.JSX中的标签可以是单标签，也可以是双标签（如果是单标签，则必须以`/>`结尾）
return (
  <div>
    <h2>hello world</h2>
    <br />
    <h2>hello react</h2>
  </div>
);

JSX 的注释编写

return (
  <div>
    <h2>注释编写</h2>
    {/* JSX 的注释写法 */}
  </div>
);

JSX 中插入子元素不同类型的处理

• JSX 嵌入变量作为子元素
  • 1.当变量是 Number、String、Array 类型时，可以直接显示
  • 2.当变量是 null、undefined、Boolean 类型时，内容为空
    • 若要显示，需转为字符串
    • 转换方式：toString、拼接空字符串、String()等方式
  • 3.Object 对象类型不能作为子元素

    <script type="text/babel">
      // 1.创建root
      const root = ReactDOM.createRoot(document.querySelector("#root"));

      // 2.封装App组件
      class App extends React.Component {
        // 组件数据
        constructor() {
          super();
          this.state = {
            count: 100,
            message: "hello world",
            names: ["a", "b", "c"],

            udf: undefined,
            nl: null,
            bl: true,

            obj: { name: 'outman'}

          };
        }

        // 渲染内容
        render() {
          const { message, names, count } = this.state;
          const { udf, nl, bl } = this.state;
          const { obj } = this.state;

          return (
            <div>
              {/* Number/String/Array 直接显示 */}
              <h2>{count}</h2>
              <h2>{message}</h2>
              <h2>{names}</h2>

              {/* undefined/null/Boolean 显示为空 */}
              <h2>{udf}</h2>
              <h2>{nl}</h2>
              <h2>{bl}</h2>

              {/* 转为字符串，可以显示 */}
              <h2>{String(udf)}</h2>
              <h2>{nl + ""}</h2>
              <h2>{bl.toString()}</h2>

              {/* Object类型不可作为子元素显示 (Objects are not valid as a React child) */}
              <h2>{obj}</h2>

              {/* 可取属性值展示 */}
              <h2>{obj.name}</h2>

            </div>
          );
        }
      }

      // 3.渲染组件
      root.render(<App />);
    script>

JSX 中嵌入不同表达式

<script type="text/babel">
  // 1.创建root
  const root = ReactDOM.createRoot(document.querySelector("#root"));

  // 2.封装App组件
  class App extends React.Component {
    // 组件数据
    constructor() {
      super();
      this.state = {
        firstName: "outman",
        lastName: "chen",
        age: 20,
        movies: ["星际穿越", "流浪地球", "独行月球", "大话西游", "火星救援"],
      };
    }

    getMoviesList() {
      const liEls = this.state.movies.map((movie) => <li>{movie}</li>);
      return liEls;
    }

    // 渲染内容
    render() {
      const { firstName, lastName, age } = this.state;
      const fullName = "fullName:" + firstName + " " + lastName;
      const ageText = age >= 18 ? "成年人" : "未成年人";
      const liEls = this.state.movies.map((movie) => <li>{movie}</li>);

      return (
        <div>
          {/* 运算表达式 */}
          <h3>{10 + 10}</h3>
          <h3>{firstName + " " + lastName}</h3>
          <h3>{fullName}</h3>
          {/* 三元运算符 */}
          <h3>{ageText}</h3>
          <h3>{age >= 18 ? "成年人" : "未成年人"}</h3>
          {/* 执行一个函数 */}
          <ul>{liEls}</ul>
          <ul>
            {this.state.movies.map((movie) => (
              <li>{movie}</li>
            ))}
          </ul>
          <ul>{this.getMoviesList()}</ul>
        </div>
      );
    }
  }

  // 3.渲染组件
  root.render(<App />);
script>