Question

使用 forwardRef 中的 ref 时，ref.current 始终未定义

2020-01-17

8166

reactjs

import React, { useRef } from "react";
import { render } from "react-dom";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "left"
};

const Wrapper = () => {
  const ref = useRef();
  return <App ref={ref} />;
};

const App = React.forwardRef(
  ({ placeHolder, onNameSelected, error, onSuggestion }, ref) => {
    ref.current.setAttribute("he-de-data", "");

    return (
      <div style={styles}>
        <h4>Username</h4>
        <input ref={ref} />
      </div>
    );
  }
);

render(<Wrapper />, document.getElementById("root"));

这里有一个沙盒可以帮助您：

我有以下代码，但 ref.current 未定义。我需要使用 forwardRef 中的 ref，并使用该 ref 向 DOM 添加一些属性。但是， ref.current 始终为 未定义 。这有什么特别的原因吗？

Answer 1

首先，您错误地使用了 ref 和 forwardRef。

使用 forwardRef 是因为功能组件无法实例化，因此如果您将 ref 分配给您创建的任何功能组件，它将为 null。forwardRef 的作用是将 ref 转发到它包装的组件，然后您可以将它分配给组件内的任何 html 元素，从而让您可以从 PARENT 访问 DOM。

您要做的是直接从组件本身内部设置属性，而不是从父级设置。因此不需要转发引用

 const Comp =({ placeHolder, onNameSelected, error, onSuggestion }) => {
       const inputRef = useRef(null);
       useEffect(()=>{
          if(inputRef.current!==null)
          inputRef.current.setAttribute("he-de-data", "");
        },[]);

    return (
      <div style={styles}>
        <h4>Username</h4>
        <input ref={inputRef} />
      </div>
    );
  }

https://codesandbox.io/embed/react-16-v0kn4?fontsize=14&hidenavigation=1&theme=dark

Answer 2

Ref. -Current将在第一个渲染上不确定。它需要在分配参考之前创建所有DOM节点 +孩子。您可以使用

686229716

之类的东西来防止它。 setAttribute不返回任何东西