我试图建立一个反应应用程序，我要做的是有应用程序，并有一个部分/组件在它，我将需要的定位和宽度和高度。但是当我尝试使用document.getElementById('area').getBoundingClientRect().width(例如找到宽度)时，我无法瞄准组件。相反，除非我使用document.getElementById('root').getBoundingClientRect().width，否则我的代码似乎会失败。
我的文件:
import './App.css';
class App extends React.Component {
render() {
return (
<main>
<Space />
</main>
);
}
}
class Space extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div class="space">
<h1>{document.getElementById('root').getBoundingClientRect().width}</h1>
</div>
);
}
}
export default App;
我必须用'root'而不是'area'来工作。一个"Space"就是一个我需要知道坐标的区域。谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
在大多数情况下，您应该使用react ref来获取元素，而不是document.getElementById。例如，下面的代码呈现一个div，然后在componentDidMount中可以访问底层DOM元素:
class Example extends React.Component {
constructor(props) {
super(props);
this.mainDiv = React.createRef();
}
componentDidMount() {
console.log(this.mainDiv.current.getBoundingClientRect().width);
// Possibly set state to rerender now that you know the width
}
render() {
return (
<div ref={this.mainDiv}>
Hello World
</div>
);
}
}
如果需要获取react组件树之外的元素，getElementId有时会很有用，但这种情况并不常见。如果你试图使用getElementId而它不起作用，请确保存在一个具有该id的元素。你的问题没有显示任何id为"root"的元素。或者"area"，所以要确保它们是页面的一部分。
要访问react中的DOM属性，react中有一个叫做refs的概念。ref允许我们直接访问dom元素。因此，参考这个代码盒来了解如何使用useRef钩子在FUNCTIONAL COMPONENT中工作。
参考这个，将用代码解释，并在沙盒中看到控制台:
链接
这也可以从理论上解释:LINK