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>
  );

});

如何使用React.cloneElement（）添加基于子道具的额外道具？

1 个答案: