【前端知识】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>

你可能感兴趣的:(前端知识,React,前端,react.js,javascript)