如何使用React.cloneElement()基于子道具添加一个额外的道具?

问题描述 投票:0回答:1

我想给第一个子代添加一个额外的道具,这个子代的道具类型是 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>
  );

});

任何建议都将是巨大的,谢谢

reactjs react-hooks
1个回答
0
投票

在你的代码中,有两件事是有问题的。

  • 你返回的值是 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>
  );

});
© www.soinside.com 2019 - 2024. All rights reserved.