【React】jsx 从声明式语法变成命令式语法

谢尔登2025-05-29 5:03

在 React 中，JSX 是一种声明式的语法扩展，它使得开发者能够以类似 HTML 的方式描述用户界面。

然而，在某些情况下，可能希望将 JSX 转换为命令式语法，以获得更精细的控制或满足特定的需求。(ckeditor.com)

JSX 语法在编译时会被转换为 React.createElement 或其他相关函数的调用。这个过程通常由 Babel 等工具自动完成。例如，以下 JSX 代码：(legacy.reactjs.org, Reddit)

jsx 复制代码

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

在编译后会被转换为：

javascript 复制代码

const element = React.createElement('h1', null, 'Hello, world!');

在 React 17 引入的新 JSX 转换中，编译器会自动引入 jsx 函数，而不再需要显式导入 React：(legacy.reactjs.org)

javascript 复制代码

import { jsx as _jsx } from 'react/jsx-runtime';

const element = _jsx('h1', { children: 'Hello, world!' });

这种转换方式使得 JSX 更加灵活，并减少了对 React 的直接依赖。

以下是一个将 JSX 转换为命令式语法的示例：

使用 JSX：

jsx 复制代码

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

转换为命令式语法：

javascript 复制代码

function Welcome(props) {
  return React.createElement('h1', null, `Hello, ${props.name}`);
}