我如何使用自定义 JSX 与 React 共存？

Question

我们自己实现了一套JSX语法。为了使用JSX语法高亮等生态，我们定义我们的文件后缀为.x.tsx

我们自己写的loader，但是在和React共存的情况下，我们的JSX语法会报很多错误

error details

不知道有没有办法区分.x.tsx和.tsx

有什么想法吗？

代码：

// XComponent.x.tsx

import X, { InnerComponentA } from 'xReact';

export default () => <InnerComponentA style={{ componentHeight: 100 }} />;

// XRender.x.tsx

import { render } from 'xReactDOM';
import XComponent from './XComponent.x';

export default (container: HTMLElement) => render(container, XComponent);

// ReactComponent.tsx

import React, { useEffect, useRef } from 'react';
import renderX from './XRender.x';

export default () => {
  const divRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    renderX(divRef.current);
  }, []);

  return <div ref={divRef} />
}

Answer 1

我写了一个 TS 插件来阻止 .x.tsx 文件上的 React JSX 错误。现在提示也完整完美了

参考资料：

我如何使用自定义 JSX 与 React 共存？

How can I using custom JSX coexistence with React?

jsx

typescript

reactjs