在 Typescript 中使用 ReactDomServer.renderToString 的正确方法是什么

Question

I'm working on a Typescript app that does server-side rendering and I'm having trouble understanding the usage of ReactDomServer.renderToString and ReactDom.hydrate , specifically the type of arguments they sould receive.

I've found several examples (using JS) passing a JSX tag as the argument the following way:

ReactDomServer.renderToString(<ExampleComponent exampleProp="anyValue" />);

But when I try this on Typescript I get the following error:

Conversion of type 'RegExp' to type 'ExampleComponent' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

The way I got it working is by invoking React.createElement on my Component:

ReactDomServer.renderToString(
  React.createElement(ExampleComponent, {exampleProp: anyValue})
)

Do you have to call React.createElement on the component you want to render (if so, why)? Or is it a bug/misconfiguration on my side?

Answer 1

我的问题是文件扩展名是.ts ，打字稿需要是.tsx才能正确编译 JSX。