Нумерация компонентов с помощью React.Children.map

Рейтинг: 0Ответов: 1Опубликовано: 15.04.2023

Ни как не могу понять, как мне присвоить нумерацию каждому компоненту с обязательным использованием React.Children.map. Я получаю массив с индексами компонентов, а потом через метод RCm должен прописать условия. В данном случае он мне ничего не выводит. А других вариантах просто выводит 123. Большая просьба без издевок, я только учусь и очень многого не знаю или новый материал не успевает освоиться. Просто помогите и все.

const ChildrenExercise = () => {
    return (
            <GettingNumberingOrder>
                <Component />
                <Component />
                <Component />
            </GettingNumberingOrder>
    );
};

const GettingNumberingOrder = ({ children }) => {
    // const arreyNumber = React.Children.toArray(children) (НЕ используя этот вариант)
    const arreyNumber = children.map((x, index) => {
        return index;
    });
    return React.Children.map(arreyNumber, (child) => {
        React.cloneElement(child, { ...child.props, number: +child.key + 1 });
    });
};

const Component = ({ number }) => {
    return <div> Компонент {number}</div>;
};


Результат должен получиться таким:
Компонент 1
Компонент 2
Компонент 3
reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0

Прочитайте документацию по Children.map, а так же вспомните, что map должен что-то возвращать, для этого нужно в его callback функции вернуть что-то, в нашем случае элемент после cloneElement.
Лучший ваш помощник - документация.

import { Children, cloneElement } from "react";

const Component = ({ number }) => {
  return <div> Компонент {number}</div>;
};

const GettingNumberingOrder = ({ children }) => {
  // const arreyNumber = React.Children.toArray(children) (НЕ используя этот вариант)

  return Children.map(children, (child, index) => {
      return cloneElement(child, { ...child.props, number: index + 1 });
  });
};

const ChildrenExercise = () => {
  return (
          <GettingNumberingOrder>
              <Component />
              <Component />
              <Component />
          </GettingNumberingOrder>
  );
};