如何引用React组件返回的元素?

Question

我想首先告诉你，我是react的新手，我的工作背景几乎完全是使用香草JS和HTML。我想知道如何在一个函数中引用/传递一个元素作为一个参数，就像你在JS中如何去做一样:

const myElement = document.getElementById("my-element");

或

const myElement = document.createElement("div");
function testFunc(element) {
return element.getBoundingClientRect();
}
testFunc(myElement);

我在谷歌上搜索了一下，但没有找到任何好的答案，我所能找到的都是关于"ref"但我相信有一个更简单的解决办法。

这是我现在在React中的内容:

import React from "react";
import "./myComp.css";
function myComp(props) {
const sliderContainer = (
<div className="slider-container" style={props.styles}></div>
);
function myFunc(element) {
return element.getBoundingClientRect();
}
const elementDimensions = myFunc(sliderContainer);
return { sliderContainer };
}
export default myComp;

但是我想做的是:

import React from "react";
import "./myComp.css";
function myComp(props) {
const sliderContainer = "slider-container" //SOME SORT OF REFRENCE / SELECTOR, I'VE FIGURED OUT THAT querySelectors IS NOT THE RIGHT APPORACH
function myFunc(element) {
return element.getBoundingClientRect();
}
const elementDimensions = myFunc(sliderContainer);
return (
<div className="slider-container" style={props.styles}>
<div className="myChild"></div>
</div>
);
}
export default myComp;

Answer 1

应该可以:

const sliderContainer = useRef(null);
function myFunc(element) {
return element.getBoundingClientRect();
}
useEffect(() => {
const elementDimensions = myFunc(sliderContainer.current);
});
return (
<div ref={sliderContainer} className="slider-container" style={props.styles}>
<div className="myChild"></div>
</div>
);

一旦组件被挂载，ref属性将把该元素分配给sliderContainer.current。

注意初始值设置为null:useRef(null)。

你必须等到元素不为空时才能访问它，因为当组件最初呈现时元素还没有被挂载。

Answer 2

在React中可以使用

document.getElementById('id-object');

或

document.querySelector('object-class');

但是你可以在Medium上找到更多的信息。

希望这是有用的!

Answer 3

您可以在React中使用document.getElementById('slider-container');或document的任何其他用途。