React 学习笔记：JSX 语法

最新推荐文章于 2025-06-11 21:38:57 发布

孤城浪人

最新推荐文章于 2025-06-11 21:38:57 发布

阅读量328

点赞数

分类专栏： # React相关文章标签： react.js javascript 学习

本文链接：https://blog.youkuaiyun.com/weixin_46015333/article/details/128157669

版权

React相关专栏收录该内容

6 篇文章

订阅专栏

JSX

JSX 是 JavaScript XML 的简写，表示了在 JavaScript 中书写 XML 格式的代码。它可以让我们在 React 中创建元素更加简单，并且保留 HTML 代码的结构更直观，提高开发效率。

注意：JSX 是 JavaScript 的语法扩展，无法在浏览器中直接使用，在 create-react-app 脚手架中内置了 @babel/plugin-transform-react-jsx 插件来解析它，成为 JavaScript 的标准语法。

JSX 语法规则

定义虚拟DOM时，不要写引号。
标签中混入JS表达式时要用{}。
类名指定不能用 class，要用 className。label 标签的 for 属性要写成 htmlFor
内联样式，要用style={{key:value}}的形式去写。
必须只能有一个根标签，可以使用 <></> 幽灵标签，其实是 <React.Fragment></React.Fragment> 简写
标签必须闭合，可以写单标签，例<span />
标签首字母
- 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
- 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
如果 JSX 有换行，最好使用 () 包裹

JSX 使用

使用表达式

进行运算
三元运算
使用函数
使用 JSX
使用注释，格式{/* 注释*/}

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 数据
    const data = {
      name: '孤城浪人',
      age: 18,
    };
    // 函数
    const ageAdd = () => {
      return ++data.age;
    };
    // jsx表达式
    const list = (
      <ul>
        <li>姓：{data.name.substring(0, 2)}</li>
        <li>名：{data.name.substring(2)}</li>
      </ul>
    );
    // 创建虚拟dom
    const Vdom = (
      <div>
        {/* 使用数据 */}
        <div>姓名：{data.name}</div>
        <div>年龄：{data.age}</div>
        {/* 使用三元 */}
        <div>是否成年：{data.age >= 18 ? '是' : '否'}</div>
        {/* 使用函数 */}
        <div>年龄加一：{ageAdd()}</div>
        {/* 使用JSX(jsx也是表达式) */}
        <div>{list}</div>
      </div>
    );
    // 渲染虚拟dom
    ReactDOM.render(Vdom, document.getElementById('root'));
  </script>
</body>

条件渲染

使用分支语句 if/else 完成条件渲染
使用三元运算符完成条件渲染
使用逻辑运算符完成条件渲染

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 数据
    const data = {
      name: '孤城浪人',
      age: 18,
    };
    // 分支语句
    const getDom = () => {
      if (data.age >= 18) {
        return <span>是</span>;
      } else {
        return <span>否</span>;
      }
    }
    const Vdom1 = getDom();
    // 三元表达式
    const Vdom2 = <div>（三元表达式判断）是否成年：{data.age >= 18 ? <span>是</span> : <span>否</span>} </div>
    // 逻辑运算
    const Vdom3 = <div>（逻辑判断判断）是否成年：{data.age >= 18 && <span>是</span>}{data.age < 18 && <span>否</span>} </div>
    // 创建虚拟dom
    const Vdom = (
      <div>
        {/* 使用数据 */}
        <div>姓名：{data.name}</div>
        <div>年龄：{data.age}</div>
        <div> （分支语句）是否成年：{Vdom1}</div>
        {Vdom2}
        {Vdom3}
      </div>
    )
    // 渲染虚拟dom
    ReactDOM.render(Vdom, document.getElementById('root'));
  </script>
</body>

列表渲染

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 数据
    const data = [{
      name: '孤城浪人',
      age: 18,
    }, {
      name: '孤城',
      age: 19,
    }, {
      name: '孤城',
      age: 20,
    }, {
      name: 'xxxx',
      age: 21,
    }];
    // 创建虚拟dom
    const Vdom = (
      <ul>
        {data.map((item) => (
          <li>
            <span>姓名：{item.name}</span><br />
            <span>年龄：{item.age}</span>
          </li>
        ))}
      </ul>
    )
    // 创建虚拟dom
    const Vdom1 = []
    data.map((item) => {
      Vdom1.push(
        <li>
          <span>姓名：{item.name}</span><br />
          <span>年龄：{item.age}</span>
        </li>
      )
    })
    // 渲染虚拟dom
    ReactDOM.render(<ul>{Vdom1}</ul>, document.getElementById('root'));
  </script>
</body>

style

style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串
React 会自动添加 ”px” 后缀到内联样式为数字的属性后，其他单位需要手动添加

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 数据
    const data = {
      name: '孤城浪人',
      age: 18,
    };
    // // 函数
    const ageAdd = () => {
      return ++data.age;
    };
    const Vdom = (
      <div>
        {/*类名*/}
        <div className="name">姓名：{data.name}</div>
        {/*行内样式驼峰key值*/}
        <div style={{ backgroundColor: 'red' }}>年龄：{data.age}</div>
        {/*动态类名*/}
        <div className={data.age >= 18 ? 'old' : 'young'}>是否成年：{data.age >= 18 ? '是' : '否'}</div>
        {/*动态样式*/}
        <div style={{ color: data.age >= 18 ? 'aqua' : 'antiquewhite' }}>年龄加一：{ageAdd()}</div>
      </div>
    );
    // 渲染虚拟dom
    ReactDOM.render(Vdom, document.getElementById('root'));
  </script>
</body>