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

Question

我正在开发一个执行服务器端渲染的 Typescript 应用程序，但我无法理解ReactDomServer.renderToStringand的用法ReactDom.hydrate，特别是他们应该接收的参数类型。

我发现了几个示例（使用 JS）通过以下方式传递 JSX 标记作为参数：

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

但是当我在 Typescript 上尝试这个时，我收到以下错误：

将 'RegExp' 类型转换为 'ExampleComponent' 类型可能是错误的，因为这两种类型与另一种类型都没有足够的重叠。如果这是故意的，请先将表达式转换为“未知”。

我让它工作的方式是调用React.createElement我的组件：

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

您是否必须调用React.createElement要渲染的组件（如果是，为什么）？还是我这边的错误/配置错误？

Answer 1

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