Отображение компонента на основе значения prop

Question

У меня есть четыре компонента: Прямоугольник, Круг, Треугольник, Звезда. В зависимости от значения, которое пользователь указал в реквизитах, я хочу вернуть компонент. Например, если пользователь указал опору как прямоугольник, я хочу отобразить компонент прямоугольника. Я не хочу использовать оператор If-Else каждый раз, проверяя все четыре условия. Есть ли лучший вариант?

Пример: компонент прямоугольника

import React from "react";

function Rectangle(props) {
  return (
    <div className="term">
      <svg width="400" height="110">
        <rect
          width="300"
          height="100"
          stroke="black"
          stroke-width="3"
        />
      </svg>
    </div>
  );
}

export default Rectangle;

Кто-нибудь может помочь? Заранее спасибо.

Answer 1

Определите отображение состояния c для shape type -> Component. Например, если тип формы указан в опоре shape:

const Shapes = {
    rectangle: Rectangle,
    circle: Circle,
    triangle: Triangle,
    star: Star,
};

const Shape = ({shape, ...props}) => {
    const ActualShape = Shapes[shape];

    return <ActualShape {...props} />;
};

Пример использования:

<Shape shape="circle" r="10" stroke="red" />
<Shape shape="rectangle" stroke="black" width="300" height="100" />