Jeer
@Jeer
уверенный пользователь

Как правильно выносить общую часть из компонентов реакт?

Привет, друзья,
У меня есть два очень похожих компонента (часть страницы с бутстрап версткой)
import React from "react";
import UserName from "./UserName";

type UserColProps = {
  labelText: string;
  bWidth: string;
  userId: string;
}

function UserCol(props: UserColProps) {
  return (
    <div className={props.bWidth}>
      <label className="mr-2">
        {props.labelText}
      </label>
      <b>
        <UserName userId={props.userId} />
      </b>
    </div>
  );
}

export default UserCol;


import React from "react";
import Priority from "./Priority";

type PriorityColProps = {
  priorityId: number;
  labelText: string;
  bWidth: string;
};

function PriorityCol(props: PriorityColProps) {
  return (
    <div className={props.bWidth}>
      <label className="mr-2">{props.labelText}</label>
      <b>
        <Priority id={props.priorityId} />
      </b>
    </div>
  );
}

export default PriorityCol;

В типах отличаются поля userId и priorityId, оба number. И в теле подставляются соответствующие компоненты UserName и Priority с этими параметрами

Отрисовываю их на странице вот так:
<div className="row form-group">
        <UserCol bWidth="col-lg-3" labelText="Assignee" userId={epic.assignee} />
        <UserCol bWidth="col-lg-3" labelText="Reporter" userId={epic.reporter} />
        <PriorityCol bWidth="col-lg-3" labelText="Priority" priorityId={epic.priority} />
        <DateCol bWidth="col-lg-3" labelText="Priority" date={epic.dueDate} />
</div>

Не могу сообразить, как мне правильно сделать так, чтобы остался один компонент с htlm элементами с бутстраповской обвязкой, внутрь которого я бы мог передавать какие-то другие кастомные компоненты или даже просто стрингу или дату?
  • Вопрос задан
  • 65 просмотров
Пригласить эксперта
Ответы на вопрос 1
@ftftftftftftff
frontend developer
ну как вариант можешь передавать еще какой-нибудь пропс, например type,который имеет значение либо user либо priority, и в компоненте проверяя его значение возвращаешь то, что надо
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы