时间戳

首页 > 解决方案 > 从 Array 创建的 React refs 不起作用

javascript - 从 Array 创建的 React refs 不起作用

问题描述

我正在尝试使用ref从数组创建的 s 但是当我签入 React Developper Tools 的 Component 选项卡时，ref传递给inputare always undefined。我在这里错过了什么？

const MyComponent = () => {
  const refs = useMemo(() => Array(2).fill(0).map(i => React.createRef()), []);

  const TextInput = ({ name, value, inputRef }) => (
    <input
      name={name}
      value={value}
      onChange={updateField()}
      ref={inputRef}
    />
  )

  return (
    <TextInput
      name="lastname"
      value="Nom *"
      inputRef={refs[0]}
    />
    <TextInput
      name="firstname"
      label="Prénom *"
      inputRef={refs[1]}
    />
  )
}

谢谢！

标签： javascriptreactjs

解决方案

如果您有可变数量的 ref，您将需要一个函数样式的 ref，如下所示。

const TextInput = ({
  name,
  value,
  refs
}) => (
  <input
    name={name}
    value={value}
    ref={(el) => {
      refs.current[name] = el;
    }}
  />
);

const MyComponent = () => {
  const refs = React.useRef({});

  React.useLayoutEffect(() => {
    console.log(refs.current);
  }, []);

  return (
    <>
      <TextInput name="lastname" value="Nom *" refs={refs} />
      <TextInput name="firstname" value="Prénom *" refs={refs} />
    </>
  );
};

这将记录

{lastname: HTMLInputElement, firstname: HTMLInputElement}

顺便说一句：永远不要嵌套组件——这会导致不必要的重新渲染。

推荐阅读