从Array创建的React refs不工作

Question

我试图使用从数组创建的refs，但当我在React developer Tools的Component选项卡中检查时，传递给input的ref总是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]}
/>
)
}

谢谢!

Answer 1

如果你有一个可变数量的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}

作为旁白:永远不要嵌套组件-那会导致不必要的呈现。