Блог

Главная - Вопросы по программированию - как я могу создать компонент, в котором я могу рекурсивно добавлять как можно больше уровней вложенных точек в компонент react

как я могу создать компонент, в котором я могу рекурсивно добавлять как можно больше уровней вложенных точек в компонент react

#reactjs #typescript #react-typescript #recursive-datastructures #recursive-type

Вопрос:

Ранее в моем компоненте был только один уровень подзадачи, поэтому,

это выглядело бы так

основной пункт 1

  • подпункт 1
  • подпункт 2

основной пункт 2

  • подпункт 1

Для этого мой код выглядел так

     interface PointCardProps {
    pointData: {
      mainPoint: string
      subPoint: string[]
    }[] 
  }

export const singleNest = (props:PointCardProps) => {
    return(
        <ol>
        {props.pointData.map((value) => {
          return (
            <>
              <li>
                <div>
                  {value.mainPoint}
                  <div>
                    <ul>
                      {value.subPoint.map((point) => {
                        return <li>{point}</li>
                      })}
                    </ul>
                  </div>
                </div>
              </li>
            </>
          )
        })}
      </ol>
    )
}

Как я могу изменить компонент таким образом, чтобы он мог иметь любое количество уровней

например: основной пункт 1

  • подпункт 1
  • подпункт 2
    • подпункт 2.1
      • подпункт 2.2
        • подпункт 2.2.1

нужно начать с изменения интерфейса, пожалуйста, помогите

Комментарии:

1. pointData должно быть рекурсивным. Должен subPoint содержать еще pointData один ? Пример: type Tree<T> = { node: T, tree: Tree<T> }

2. @капитан-йоссариан Я мало работал над машинописным текстом, поэтому я не понимаю, что это значит, можете ли вы показать небольшие фиктивные данные, чтобы показать, как type Tree<T> = { node: T, tree: Tree<T> } это выглядит ?

3. Конечно , tsplay.dev/N52lBm

4. @капитан-йоссариан да, это было то, о чем я думал. не знаю, как рекурсивно распределять очки, я тороплюсь со временем, так что на самом деле у меня нет роскоши сидеть и думать

Ответ №1:

Здесь у вас есть рекурсивный компонент react с рекурсивными реквизитами:

 type Point = {
  point: string;
  subpoints: Point[];
};

const points = {
  point: "0",
  subpoints: [
    {
      point: "1",
      subpoints: [
        {
          point: "2",
          subpoints: []
        }
      ]
    }
  ]
};

const RecursiveList = (props: Point) => {
  const { point, subpoints } = props;
  console.log({ subpoints });

  return (
    <>
      <div>{point}</div>
      <ul>
        {subpoints.map((elem, index) => (
          <RecursiveList key={index} {...elem} />
        ))}
      </ul>
    </>
  );
};

export default function App() {
  return <RecursiveList {...points} />;
}
Метки: ,