正如您所看到的，html文件中只有一个空的div。当执行index.ts文件时，React DOM呈现并显示App.ts中的React代码。这意味着React DOM更新DOM以匹配您的React元素。
如果您运行console.log(document.getElementById('load'))，在React DOM完成MainPage组件的初始呈现之前，您的html文件中没有<btn id='load' />元素。因此控制台日志为null。
您应该等待React DOM呈现btn。挂载MainPage组件（即添加到html文件）后，您可以使用document.getElementById('load')访问btn。
要确保在装载带有id='load'的btn后执行代码，请执行以下操作：

*使用React功能组件：在useEffect中调用所需的函数，并使用一个空的依赖项数组。
*使用React类组件：使用componentDidMount方法。
*使用Javascript：如果您不希望在React内部调用代码，请使用MutationObserver API。Read more

你需要等到组件mounted出现，你才能在useEffect里面使用它的钩子。

useEffect(() => {
  console.log(document.getElementById('load'))
}, [])

或者您可以使用template ref。
TS：

import { useRef } from 'react'

const buttonRef = useRef()

useEffect(() => {
  console.log(buttonRef.current)
}, [])

html：按钮