reactjs - 我重写了 React.createElement，但是 jsx 的按钮好像没有调用 React.createElement

Question

我覆盖了React.createElement，但是jsx的按钮好像没有调用React.createElement。

React.createElement 没有获取到 jsx 的值作为按钮。

Answer 1

以下内容摘自:https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

React 17 引入了两个新的 React 包入口点，旨在仅供 Babel 和 TypeScript 等编译器使用。新的 JSX 转换不是将 JSX 转换为 React.createElement，而是自动从 React 包中的那些新入口点导入特殊函数并调用它们。

function App() {
  return <h1>Hello World</h1>;
}

这是新的 JSX 转换将其编译成的内容:

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

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

所以，你应该重写 jsx 函数。

// Prod mode
import jsxRuntime from 'react/jsx-runtime'
const jsx = jsxRuntime.jsx
jsxRuntime.jsx = (...args) => {} 

// Dev mode
import jsxRuntime from 'react/jsx-dev-runtime'
const jsx = jsxRuntime.jsxDEV
jsxRuntime.jsxDEV = (...args) => {}