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

Question

首先我想告诉你我是 React 的新手，我的背景几乎完全是使用 vanilla JS 和 HTML。我想知道如何 reference/pass 一个元素作为函数中的参数，类似于你在 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

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

Answer 2

这应该有效：

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。

请注意，该值最初设置为空：useRef(null)。

您必须等到元素不为 null 才能访问它，因为在最初呈现组件时尚未安装该元素。

Answer 3

在 React 中你可以使用

document.getElementById('id-object');

或

document.querySelector('object-class');

但您可以在 Medium 上的 article 中找到更多信息。

希望这有用！

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

How do I reference an element that is to be returned by a React component?

html

javascript

element

ref

reactjs