react-jsx语法相关

最新推荐文章于 2024-11-17 22:31:08 发布

合法的咸鱼

最新推荐文章于 2024-11-17 22:31:08 发布

阅读量98

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/yuey0809/article/details/125994232

版权

react 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了React中如何使用React.Fragment避免多余的根节点，以及如何在JSX中写入JS表达式。示例代码展示了在组件中直接嵌套多个元素和使用变量的方法，并解释了哪些内容不会被渲染到页面。同时，讲解了自闭和标签的正确使用方式。

摘要由CSDN通过智能技术生成

单一根节点

当你在某种情况下不得不写两个元素且不想页面上多显示一个根节点
可以使用React.Fragment简写为<></>

import React from 'react';
import ReactDOM from 'react-dom/client';

const double = (
  <React.Fragment> // 可写为<>
    <h1>Hello World <span>span元素</span></h1>
    <p>123456</p>
  </React.Fragment> // 对应为</>
)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {double}
  </React.StrictMode>
);

必须拥有闭合标签(自闭和标签可以)

<img />
<img></img>

<img > 这个不行

在JSX语法中使用JS变量

import React from 'react';
import ReactDOM from 'react-dom/client';

const a = 123, b = 456;
const h1 = (
	// 使用单花括号即可写JS表达式
    <h1>Hello World <span>{a} * {b} = {a*b}</span></h1>
)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {h1}
  </React.StrictMode>
);