我试图使用电子,预加载,渲染器与reactj和typescript。
<index.html>
<body>
<div id="root" />
<script src='./renderer.js'/>
</body>
<index.ts>
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(<App />);
<App.ts>
<div className="App">
<header></header>
<MainPage />
</div>
<MainPage.ts>
<div>
<btn id='load' />
</div>
<renderer.js>
console.log(document) ----------------------------> OK
console.log(document.getElementById('root')) ------> OK
console.log(document.getElementById('load')) ------> null
要在renderer.js中使用id='load' btn,我可以做什么?我错过了什么?
2条答案
按热度按时间v9tzhpje1#
正如您所看到的,
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 morejq6vz3qz2#
你需要等到组件
mounted
出现,你才能在useEffect
里面使用它的钩子。或者您可以使用
template ref
。TS:
html:按钮