如何引用由 React 組件返回的元素？

Question

我想首先告訴你，我是 React 的新手，我的背景幾乎完全使用 vanilla 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

您可以使用document.getElementById('slider-container'); 或 React 中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 。

請注意，該值最初設置為 null： useRef(null) 。

您必須等到該元素不為 null 后才能訪問它，因為在最初呈現組件時該元素尚未安裝。

Answer 3

在 React 中你可以使用

document.getElementById('id-object');

或者

document.querySelector('object-class');

但是你可以在這篇關於 Medium 的文章中找到更多信息。

希望這是有用的！