Question

我试图在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"
          />
)
}

在DOM中会变成这样：

<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 32 32" color="black" class="mi-home-card-icon mi-home-card-icon-apple" height="3rem" width="3rem" xmlns="http://www.w3.org/2000/svg" style="color: black;"><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>

我希望能够在与某些其他DOM元素交互的用户上修改此SVG信息。

当我尝试使用它时，出现错误：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

从我正在阅读的内容中，我还需要添加一个forwardRef，因为React由于某种原因需要它作为组件？

我对这里的确切过程不完全了解。

如果有人可以向我解释我的代码能够影响SVG的样子，以及forwardRef在这里到底在做什么以及它与类组件有何不同，那对我将大有帮助。

>

Answer 1

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"
  />
);}

export default Home;

在使用React.createRef如下创建的ref对象上，可以使用

svg进行引用：

Answer 2

DiApple是一个功能组件，如React文档中关于forwarding refs的解释，要定义ref在DiApple上将要引用的内容，您需要将其包装forwardRef调用并将ref参数传递给所需的元素：

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

接下来，我建议将null传递给useRef而不是{ value: null }，这样appleRef.current最初将是null，然后将引用DOM节点：

const appleRef = useRef(null);

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

我建议阅读有关useRef的更多信息。

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

2 个答案: