Как добавить дополнительную опору на основе дочерней опоры с помощью 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

В вашем коде есть две проблемы c.

• вы возвращаете значение 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>
  );

});