面试题-React(三)：什么是JSX？它与常规JavaScript有什么不同？-Toy模板网

这篇具有很好参考价值的文章主要介绍了面试题-React(三)：什么是JSX？它与常规JavaScript有什么不同？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在React的世界中，JSX是一项引人注目的技术，它允许开发者在JavaScript中嵌套类似HTML的标签，用于描述UI组件的结构。本篇博客将通过丰富的代码示例，深入探索JSX语法，解析其在React中的用法和优势。

一、JSX基础语法

在React项目中，你会经常看到类似HTML的代码块，这就是JSX。以下是一些常见的JSX语法示例：

基本元素：

const element = <h1>Hello, JSX!</h1>;

表达式插值：

const name = "Alice";
const element = <p>Hello, {name}!</p>;

条件渲染：

const isLoggedIn = true;
const element = isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>;

列表渲染：

const items = ['Apple', 'Banana', 'Orange'];
const list = (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

注释写法

{/* 这是注释 */}

书写规范

JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素，如：

const root = (
  <div>
    <h1>标题</h1>
    <div>内容</div>
  </div>
)

JSX中的标签可以是单标签，也可以是双标签，如果是单标签，必须以/>结尾;

const root = (
  <div>
    <h1>标题</h1>
    <br/>
    <div>内容</div>
  </div>
)

二、JSX插入不同类型的值

number/string/array直接显示

const number = 123
const str = "hello world"
const arr = ["red", "yellow", "blue"]

const root = (
  <div>
    <p>{number}</p>
    <p>{str}</p>
    <p>{arr}</p>
  </div>
)

面试题-React(三)：什么是JSX？它与常规JavaScript有什么不同？,面试题,React面试题,javascript,react.js,前端,React

null/undefined/boolean会显示为空

const number = 123
const str = "hello world"
const arr = ["red", "yellow", "blue"]
const nul= null,
const und= undefined,
const bool= true

const root = (
  <div>
    <p>{number}</p>
    <p>{str}</p>
    <p>{arr}</p>
    
    <p>{nul}</p>
    <p>{und}</p>
    <p>{bool}</p>

    <p>结尾</p>
  </div>
)

面试题-React(三)：什么是JSX？它与常规JavaScript有什么不同？,面试题,React面试题,javascript,react.js,前端,React