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

Question

我们已经自己实现了一组JSX语法。为了使用JSX语法高亮等功能，我们将文件后缀定义为.x.tsx

我们写了自己的加载器，但是在与React共存的情况下，我们的JSX语法会报告很多错误。

错误细节

我不知道是否有办法区分。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上的React JSX错误。tsx文件。现在提示符也完成了。

参:

• https://github.com/microsoft/TypeScript/wiki/Architectural-Overview
• https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin
• https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-API
• https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API