TypeScript渲染React组件报void无调用签名错误如何解决

• 你本地安装的React版本为18+，React 18已经移除了原有ReactDOM.render的全局导出API，原API被标记为废弃，改用createRoot方法实现组件挂载。因此你按原有方式导入并调用ReactDOM.render时，TS会检测到该方法不存在，返回值为void，调用时就会触发你遇到的报错。
• 额外注意：你代码中document.querySelector('my-app')如果是匹配id为my-app的元素，需要改为document.querySelector('#my-app')，否则会找不到挂载节点。

方案1：适配React 18的新API（推荐） #

修改react-dom的导入方式和挂载逻辑，代码调整如下：

import * as React from 'react';
// 从react-dom/client导入createRoot
import { createRoot } from 'react-dom/client';
import SplitButton from '../../../src/ListButton/SplitButton'

const App = () => {
    const items: any = ['Item1', 'Item2', 'Item3'];

    return (
      <div>
        <SplitButton items={items} text="Enabled Button" /> &nbsp;
        <SplitButton disabled={true} items={items} text="Disabled Button" />
      </div>
      );
}

// 先获取挂载节点，如果是id为my-app要加#前缀，末尾加!是非空断言，规避TS空值检测
const rootElement = document.querySelector('my-app')!;
const root = createRoot(rootElement);
root.render(<App />);

如果不想用非空断言，也可以提前对rootElement做非空判断，避免运行时找不到节点报错。

方案2：回退到React 17的写法（仅临时兼容用） #

如果暂时不想升级写法，可以锁定React相关依赖的版本为17.x：

1. 修改package.json中的依赖版本：

{
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "@types/react": "^17.0.44",
  "@types/react-dom": "^17.0.15"
}

2. 重新安装依赖后，你原本的代码即可正常运行。

内容的提问来源于stack exchange，提问作者Phat Baba