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

Question

[Виктор П.]

Привет, друзья,
У меня есть два очень похожих компонента (часть страницы с бутстрап версткой)

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 элементами с бутстраповской обвязкой, внутрь которого я бы мог передавать какие-то другие кастомные компоненты или даже просто стрингу или дату?

Comments

[Aetae]

Children? Это какбэ основы основ. Или я что-то не понимаю?

<div className={props.bWidth}>
      <label className="mr-2">
        {props.labelText}
      </label>
      <b>
        {props.children}
      </b>
    </div>

[Виктор П.]

Aetae, я только начал разбираться с реактом, похоже, что это основы основ. Было два варианта, children или дженерики. С children мне непонятно как передавать готовые компоненты в этот компонент и как правильно завести тип данных, допустим этот общий компонент с версткой будет называться BootstrapCol, тогда должно получиться что-то вроде такого?

<BootstrapCol bWidth="col-lg-3" labelText="Priority">
  <PriorityCol priorityId={epic.priority} />
</BootstrapCol>
<BootstrapCol bWidth="col-lg-3" labelText="Reporter">
  <UserCol userId ={epic.reporter} />
</BootstrapCol>

Можно как-то более изящно сделать или вот так по итогу и должно получиться и это самый норм? Какой тип у children ставить?

[Aetae]

Виктор П., ну да, тока так:

<BootstrapCol bWidth="col-lg-3" labelText="Priority">
  <Priority id={epic.priority} />
</BootstrapCol>
<BootstrapCol bWidth="col-lg-3" labelText="Reporter">
  <UserName userId={epic.reporter} />
</BootstrapCol>

[Aetae]

Виктор П., если компонент не должен быть универсальным, а работать только с конечным набором детей, то можно объединить и вот так:

function ExtraCol(props: PriorityColProps): JSX.Element;
function ExtraCol(props: UserColProps): JSX.Element;
function ExtraCol(props: PriorityColProps | UserColProps) {
  return (
    <div className={props.bWidth}>
      <label className="mr-2">{props.labelText}</label>
      <b>
        {
          'priorityId' in props 
            ? <Priority id={props.priorityId} />
            : <UserName userId={props.userId} />
        }
      </b>
    </div>
  );

<ExtraCol bWidth="col-lg-3" labelText="Priority" priorityId={epic.priority}/>
<ExtraCol bWidth="col-lg-3" labelText="Reporter" userId={epic.reporter} />

Тут обрати внимание на перегрузку функции. На первый взгляд оно бы работало и так, без перегрузки, просто как

function ExtraCol(props: PriorityColProps | UserColProps)

, но это важно для правильно работы типов позже в более сложных случаях.

Answer 1

[fff ttt]

ну как вариант можешь передавать еще какой-нибудь пропс, например type,который имеет значение либо user либо priority, и в компоненте проверяя его значение возвращаешь то, что надо

Comments

[Виктор П.]

пропс тогда должен получиться что-то вроде такого?

{
  type: 'user' | 'priority' | 'date' | 'string';
  userId?: number;
  priorityId?: number;
  date?: Date;
  content: string;
  labelText: string;
  bWidth: string;
}

Затем добавлять свитч или тип того, мне кажется очень плохой дизайн

[fff ttt]

Виктор П., что-то типо того

return (
    <div className={props.bWidth}>
      <label className="mr-2">
        {props.labelText}
      </label>
      <b>
{
         props.type==='priority'
              ?<Priority id={props.priorityId} />
              :  <UserName userId={props.userId} />
 }
     </b>
    </div>
  );