将 ReactDomServer.renderToString 与 Typescript 一起使用的正确方法是什么

Question

我正在开发一个执行服务器端渲染的 Typescript 应用程序，但我无法理解 ReactDomServer.renderToString 和 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。