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

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

});

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

解决方案:

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

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

});

给TA打赏
共{{data.count}}人
人已打赏
未分类

在Hazelcast中存储和过滤一个键的值列表。

2022-9-16 9:10:40

未分类

我想使用Vue.js进行实时加载。

2022-9-16 9:21:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索