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

这篇具有很好参考价值的文章主要介绍了【前端知识】React 基础巩固(七)——JSX 的基本语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

JSX 是什么?

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

为什么 React 选择了 JSX?

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

    • 比如 UI 需要绑定事件
    • 比如 UI 中需要展示数据状态
    • 比如在某些状态发生改变时,又需要改变 UI
  • 他们之间是密不可分的,所以 React 没有将标记分离到不同的文件中,而是将它们组合到了一起,这个地方就是组件(Component)文章来源地址https://www.toymoban.com/news/detail-496224.html

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 基础巩固(七)——JSX 的基本语法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React 基础巩固(二十七)——Fragment

    Fragment 允许将子列表分组,而无需向 DOM 添加额外节点 可以采用语法糖 / 来替代 Fragment,但在需要添加 key 的场景下不能使用此短语 查看Fragment应用后的效果

    2024年02月16日
    浏览(58)
  • 【前端知识】React 基础巩固(二十八)——StrictMode

    StrictMode 是一个用来突出显示应用程序中潜在问题的工具 与 Fragment 一样,StrictMode 不会渲染任何可见的 UI 为后代出发额外的检测和警告 严格模式检查仅在开发模式下运行,不影响生产构建 严格模式检查什么? 识别不安全的生命周期 使用过时的 ref API 检查意外的副作用 组件

    2024年02月16日
    浏览(48)
  • 【前端知识】React 基础巩固(四十)——Navigate导航

    新建Login页面,在Login中引入Navigate,实现点击登陆按钮跳转至 /home 路径下: 当路由均无匹配时,通过Navigate跳转至NotFound界面,其中 * 为通配符: 构建NotFound.jsx 在App.jsx中配置NotFound: 构建Home的子路由页面: HomeRecommend.jsx HomeRanking.jsx 利用 Route 嵌套子路由,实现Home页面下的

    2024年02月14日
    浏览(61)
  • 【前端知识】React 基础巩固(四十二)——React Hooks的介绍

    Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。 class组件 VS 函数式组件: class的优势: class组件可以定义自己的state,用来保存组件自己内部的状态;而函数式组件不可以,因为函数每次调用都会产生新的临时

    2024年02月14日
    浏览(61)
  • 【前端知识】React 基础巩固(二十三)——React 性能优化 SCU相关

    React 的渲染流程 JSX - 虚拟 DOM - 真实 DOM React 的更新流程 props/state 改变 - render函数重新执行 - 产生新的DOM树 - 新旧DOM树进行diff - 计算出差异进行更新 - 更新到真实的DOM React 在 props 或 state 发生改变时,会调用 React 的 render 方法,会创建一颗不同的树 React 需要基于这两颗不同的

    2024年02月15日
    浏览(71)
  • 【前端知识】React 基础巩固(十七)——组件化开发(一)

    什么是组件化开发? 分而治之的思想 将一个页面拆分成一个个小的功能块 将应用抽象成一颗组件树 React的组件相对于Vue更加的灵活和多样 按照不同的方式可以分为很多类组件 根据 组件的定义方式 ,分为: 函数组件 、 类组件 根据 组件内部是否有状态需要维护 ,分为:

    2024年02月12日
    浏览(68)
  • 【前端知识】React 基础巩固(三十五)——ReduxToolKit (RTK)

    Redux Tool Kit (RTK)是官方推荐的编写Redux逻辑的方法,旨在成为编写Redux逻辑的标准方式,从而解决上面提到的问题。 RTK的核心API主要有如下几个: configureStore:包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的slice reducer,添加你提供的任何Redux中间件

    2024年02月15日
    浏览(64)
  • 【前端知识】React 基础巩固(二十六)——Portals 的使用

    通常,组件会渲染到 root 节点下。可使用 Portals 将组件渲染至其他节点。 添加 id 为 more、modal 的 div 元素 构建 Modal.jsx, 通过 createPortal 把组件渲染到指定的 modal 节点下 构建 App.jsx 查看渲染结果

    2024年02月16日
    浏览(47)
  • 【前端知识】React 基础巩固(十九)——组件化开发(三)

    Main.jsx TabControl/index.jsx TabControl/style.css

    2024年02月13日
    浏览(53)
  • 【前端知识】React 基础巩固(四十三)——Effect Hook

    Effect Hook 用来完成一些类似class中生命周期的功能。 在使用类组件时,不管是渲染、网路请求还是操作DOM,其逻辑和代码是杂糅在一起的。例如我们希望把计数器结果显示在标签上,在类组件中,我们通过生命周期进行实现,如下所示: 在函数组件中,我们可以利用useEffec

    2024年02月14日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包