I overridden React.createElement, but jsx's button doesn't seem to call React.createElement

Viewed 190

I overridden React.createElement, but jsx's button doesn't seem to call React.createElement.

React.createElement did not get the value of jsx as button.

enter image description here

enter image description here

enter image description here

1 Answers

The following is excerpted from: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

React 17 introduces two new entry points to the React package that are intended to only be used by compilers like Babel and TypeScript. Instead of transforming JSX to React.createElement, the new JSX transform automatically imports special functions from those new entry points in the React package and calls them.

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

This is what the new JSX transform compiles it to:

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

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

So, you should rewrite jsx function.

// 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) => {}
Related