使用自定义引用创建组件并在以后访问它

Question

我想使用自定义 Refs 动态创建组件，我想使用这些 refs 并与 measure() 等功能一起使用

我创建了以下代码

var elems = [];
const CarousalLoop = (props) => { 
  
  
  var links = [
    { name: 'america' },
    { name: 'canada' },
    { name: 'norway' },
    { name: 'bahamas' }
  ];
  
   links.forEach((val, index) => {
    elems[val.name]=  useRef(null);
  });
  
 const listItems = links.map((link) =>
 <CustomCarousel ref={elems[link.name]}  category={link.name}/>
    );
    return (
     <View style={{backgroundColor:"white"}}>

       {listItems}
     </View>
    );
}

例如，我想使用 elems["america"] 访问组件并在以后使用它。但我收到以下错误。

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

Answer 1

问题

是的，使用功能组件时需要转发React refs。
您不能在循环中使用 useRef 挂钩。

解决方案

修复了引用的创建。使用 React ref 保存创建的 refs 数组，并通过映射索引传递它们。

const CarousalLoop = (props) => {

  const linkRefs = useRef([]);
  
  const links = [
    { name: 'america' },
    { name: 'canada' },
    { name: 'norway' },
    { name: 'bahamas' }
  ];

  linkRefs.current = links.map((link) => linkRefs.current[link.name] ?? createRef());
  
  const listItems = links.map((link) => (
    <CustomCarousel
      key={link.name}
      ref={linkRefs.current[link.name]}
      category={link.name}
    />
  ));

  return (
    <View style={{backgroundColor:"white"}}>
      {listItems}
    </View>
  );
}

转发参考。这是通过将 CustomCarousel 包装在 React.forwardRef.

中来完成的

const CustomCarousel = React.forwardRef((props, ref) => {
  // component logic
  // attach `ref` to DOMNode if necessary or access in `useImperativeHandle` hook
  ...
});

稍后当您want/need访问一个特定的ref时，通过is key引用它然后访问当前值。

linkRefs.current['america']?.current

使用自定义引用创建组件并在以后访问它

Create components with custom refs and access it later

reactjs

react-native

react-ref

react-hooks

问题

解决方案