根据道具值显示组件反应

Question

我有四个组件 Rectangle、Circle、Triangle、Star。 根据用户在道具中提供的值，我想返回组件。例如，如果用户将道具作为 Rectangle，我想显示 Rectangle 组件。 我不想每次检查所有四个条件时都使用 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

为shape type -> Component 定义一个静态映射。例如。假设 shape 类型在 prop 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" />