Javascript 如何在功能组件中正确使用forwardRef？

我试图在React中使用带有挂钩的功能组件。我已经使用了大量的类组件，但是功能组件似乎是React的新模式，所以我尝试让它们工作

我试图做的是修改一个SVG文件，当用户做某事时，我正在加载它

以下是我的基本代码：

function home() {

const appleRef = useRef({ value: null });

  useEffect(() => {
    if (typeof appleRef !== "undefined") {
      console.log(appleRef);
    }
  }, []);

return(
          <DiApple
            ref={appleRef}
            size={"3rem"}
            color={"black"}
            className="mi-home-card-icon mi-home-card-icon-apple"
          />
)
}

从我阅读的内容来看，我还需要添加一个forwardRef，因为React出于某种原因需要它成为一个组件

我不完全理解这里的确切过程

如果有人能向我解释我的代码应该是什么样子才能影响SVG，forwardRef在这里到底做了什么，以及它与类组件的区别，那将对我非常有帮助；

import React, { useEffect, useRef } from "react";
function Home() {
const appleRef = useRef({ value: null });//remove this ref
const svgRef = React.createRef();
const DiApple = React.forwardRef((props, ref) => {
  return (
    <svg
      ref={ref}
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      version="1.1"
      viewBox="0 0 32 32"
      color="black"
      className="mi-home-card-icon mi-home-card-icon-apple"
      height="3rem"
      width="3rem"
      xmlns="http://www.w3.org/2000/svg"
      style={{ color: "black" }}
      {...props}
    >
      <path d="M23.023 17.093c-0.033-3.259 2.657-4.822 2.777-4.901-1.512-2.211-3.867- 2.514-4.705-2.548-2.002-0.204-3.91 1.18-4.926 1.18-1.014 0-2.583-1.15-4.244-1.121-2.185 0.033-4.199 1.271-5.323 3.227-2.269 3.936-0.58 9.769 1.631 12.963 1.081 1.561 2.37 3.318 4.061 3.254 1.63-0.064 2.245-1.055 4.215-1.055s2.524 1.055 4.248 1.021c1.753-0.032 2.864-1.591 3.936-3.159 1.24-1.814 1.751-3.57 1.782-3.659-0.038-0.017-3.416-1.312-3.451-5.202zM19.783 7.53c0.897-1.089 1.504-2.602 1.34-4.108-1.294 0.053-2.861 0.86-3.79 1.948-0.832 0.965-1.561 2.502-1.365 3.981 1.444 0.112 2.916-0.734 3.816-1.821z"></path>
  </svg>
  );
});

return (
  <DiApple
    ref={svgRef}
    size={"3rem"}
    color={"black"}
    className="mi-home-card-icon mi-home-card-icon-apple"
  />
);}

函数Home（）{ const appleRef=useRef（{value:null}）；//删除此引用 const svgRef=React.createRef（）； 常量dipple=React.forwardRef（（道具，ref）=>{ 返回( ); }); 返回( );}

导出默认主页

使用
React.createRef
创建的ref对象上可以使用svg引用，如下
svgRef。当前
DiApple
是一个功能组件，如React文档中所述，用于定义
ref
将在
DiApple
上引用的内容，您需要将其包装在
forwardRef
调用中，并将
ref
参数传递给所需的元素：

const DiApple = React.forwardRef(function DiApple(props, ref) {
  return (
    <svg ref={ref}>
      {/* ... */}
    </svg>
  )
})

我建议阅读更多相关内容。
函数组件应使用
useRef
，在此处调用
createRef
将在每个渲染上创建一个新的ref对象。此外，无需在
Home
组件中定义
DiApple
。但你的想法是对的！
import React, { useEffect, useRef } from "react";
function Home() {
const appleRef = useRef({ value: null });//remove this ref
const svgRef = React.createRef();
const DiApple = React.forwardRef((props, ref) => {
  return (
    <svg
      ref={ref}
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      version="1.1"
      viewBox="0 0 32 32"
      color="black"
      className="mi-home-card-icon mi-home-card-icon-apple"
      height="3rem"
      width="3rem"
      xmlns="http://www.w3.org/2000/svg"
      style={{ color: "black" }}
      {...props}
    >
      <path d="M23.023 17.093c-0.033-3.259 2.657-4.822 2.777-4.901-1.512-2.211-3.867- 2.514-4.705-2.548-2.002-0.204-3.91 1.18-4.926 1.18-1.014 0-2.583-1.15-4.244-1.121-2.185 0.033-4.199 1.271-5.323 3.227-2.269 3.936-0.58 9.769 1.631 12.963 1.081 1.561 2.37 3.318 4.061 3.254 1.63-0.064 2.245-1.055 4.215-1.055s2.524 1.055 4.248 1.021c1.753-0.032 2.864-1.591 3.936-3.159 1.24-1.814 1.751-3.57 1.782-3.659-0.038-0.017-3.416-1.312-3.451-5.202zM19.783 7.53c0.897-1.089 1.504-2.602 1.34-4.108-1.294 0.053-2.861 0.86-3.79 1.948-0.832 0.965-1.561 2.502-1.365 3.981 1.444 0.112 2.916-0.734 3.816-1.821z"></path>
  </svg>
  );
});

return (
  <DiApple
    ref={svgRef}
    size={"3rem"}
    color={"black"}
    className="mi-home-card-icon mi-home-card-icon-apple"
  />
);}

const DiApple = React.forwardRef(function DiApple(props, ref) {
  return (
    <svg ref={ref}>
      {/* ... */}
    </svg>
  )
})

const appleRef = useRef(null);

useEffect(() => {
  if (appleRef.current !== null) {
    console.log(appleRef.current);
  }
}, []);