javascript - 从外部脚本访问 React DOM 元素
问题描述
我正在尝试从外部脚本文件访问 React DOM 元素“id”。我相信我的脚本正在正确导入,因为文件中的 console.log('test') 正在工作,尽管 console.log(myDiv) 返回 null。
我如何在 React 中实现这一点?
// 零件
import './../data/script.ts';
render() {
return (
<div id='targetDiv'>
<p>{This will be populated from my external script file...}</p>
</div>
);
}
// 脚本
var myDiv = document.getElementById('targetDiv');
console.log(myDiv);
解决方案
为了解决这个问题,我需要将我的外部脚本作为一个函数导入,然后在组件安装后调用该函数:
// 零件
import { myScript } from './../data/script';
componentDidMount() {
{
myScript();
}
}
render() {
return (
<div id='targetDiv'>
{My script now renders correctly inside the div}
</div>
);
}
// 脚本
var myDiv = document.getElementById('targetDiv');
const d = document.createElement('p');
myDiv.appendChild(d);
推荐阅读
- sql-server - 带有 GUID 全零的 MS SQL 表
- reactjs - 误报 eslint(no-unused-vars)
- javascript - 在调用另一个函数之前等待父状态更新
- installation - Tidal Cycles cabal 安装失败
- node.js - 在承诺链中调用 process.exit() 的正确位置
- java - 与 AES-CTR 相比,Java AES-GCM 非常慢
- delphi - 如何在blob中写入txt文件
- database - 可以使用什么服务来限制物联网设备连接到数据库的数量?
- c# - C#在包含另一个列表的对象列表中查找重复属性
- adonis.js - 无法获取请求,文件()在 adonisjs 帖子中工作