如何使用React.cloneElement()在子道具的基础上添加额外的道具

Question

我正试图为道具类型为scan的第一个子项添加一个额外的道具，以便在渲染的第一个扫描组件上启用自动对焦？

以下是我目前所拥有的：

import React, { cloneElement } from 'react;
export default function Form({ children }) {
const [focus, setFocus] = useState(false);
...
return (
<form onSubmit={onSubmit}>
{children.map((child, i) => {
if (child.props.config.type === "scan" && !focus) {
cloneElement(child, { focus: true });
return setFocus(true);
}
return cloneElement(child, { focus: false });
})}
</form>
);
});

任何建议都很好，谢谢

Answer 1

代码中有两个问题。

• 您从映射函数返回setFocus而不是cloneElement的值
• 在渲染中直接使用setFocus

如果你必须知道是否有一个孩子有扫描道具，请使用useRef

export default function Form({ children }) {
const focus = useRef(false);
...
return (
<form onSubmit={onSubmit}>
{children.map((child, i) => {
if (child.props.config.type === "scan" && !focus.current) {
focus.current = true;
return cloneElement(child, { focus: true });
}
return cloneElement(child, { focus: false });
})}
</form>
);
});