React createRef 在创建动态生成的组件时返回 current = null

Question

我有一个 React 组件，它接收一个对象，该对象具有用于动态生成一些子组件的属性。在生成这些新组件时，我需要为它们中的每一个创建一个引用，但是 React.createRef() 返回 current 作为 null.

这是我所做的：

const source = {
   component1: {
      name: 'Component 1',
      active: true
   },
   component2: {
      name: 'Component 2',
      active: true
   },
   component3: {
      name: 'Component 3',
      active: false
   }
}

那么这是主要成分：

function MyComp(props) {
   const {source} = props;

   const refs = {};

   function makeComps() {
      const newComps = [];
      Object.keys(source).forEach(x => {
         const myRef = React.createRef();
         refs[x] = myRef;
         newComps.push(
         <div ref={myRef}>
           <div>Name</div>
           <div>{source[x].name}</div>

           <div>Active</div>
           <div>{source[x].active ? 'Yes' : 'No'}</div>
         </div>);
      });
      return newComps;
   }

   return (
      <>
        <strong>{'Brand new components'}</strong>
        {source && makeComps()}
        {!source && <div>Nothing new</div>}
      </>
   );
}

然后，当我尝试访问 refs 时 returns:

{
   component1: {current: null},
   component2: {current: null},
   component3: {current: null}
}

我需要这些参考资料才能在某些情况下制作 window.scrollTo。根据 React 官方文档，我没有做任何奇怪的事情。我也尝试用 React.useRef() 代替，但没有。

这是我如何到达这个参考：

const myRef = refs.component3;
window.scrollTo({ behavior: 'smooth', top: myRef.current.offsetTop });

我该如何解决这个问题？我在这里错过了什么？

Answer 1

我假设您尝试在第一次渲染完成之前访问它们。在这种情况下，您的组件 没有挂载 。确保它是，使用 useEffect 挂钩。 Learn more here.

function MyComp({ source, ...props }) {
  const refs = {};

  function makeComps() {
    const newComps = [];

    Object.keys(source).forEach((x, idx) => {
      const myRef = React.createRef();
      refs[x] = myRef;

      newComps.push(
        <div key={idx} ref={myRef}>
          <div>Name</div>
          <div>{source[x].name}</div>
          <div>Active</div>
          <div>{source[x].active ? 'Yes' : 'No'}</div>
        </div>
      );
    });

    return newComps;
  }

  useEffect(() => {
    // here, your component did mount

    // try to access component1 using the optional
    // chaining feature of JavaScript
    console.log(refs.component1?.current);
  }, [refs]);

  return (
    <>
      <strong>{'Brand new components'}</strong>
      {source && makeComps()}
      {!source && <div>Nothing new</div>}
    </>
  );
}

Answer 2

好吧，Kluddizz 这里给了我部分解决方案，虽然他的解决方案没有为我的问题提供正确的答案，但他为我指出了正确的解决方案。钩子救援：

useEffect(() => {
   if (refs.component3 && refs.component3.current) {
      //do the magic
   }
});

他的评论：

You need to be sure, that you access the refs after the first render. This is simply, because React doesn't resolves refs during the first render.

是正确解决方案的切入点。

React createRef 在创建动态生成的组件时返回 current = null

React createRef returning current = null when creating dynamic generated components

reactjs

react-ref