使用重复的if else块重构React函数

function MyComponent({ condition }) {
  let content;

  if (condition === "A") {
    content = <ComponentA />;
  } else if (condition === "B") {
    content = <ComponentB />;
  } else if (condition === "C") {
    content = <ComponentC />;
  } else {
    content = <DefaultComponent />;
  }

  return <div>{content}</div>;
}

function MyComponent({ condition }) {
  return (
    <div>
      {condition === "A" && <ComponentA />}
      {condition === "B" && <ComponentB />}
      {condition === "C" && <ComponentC />}
      {!["A", "B", "C"].includes(condition) && <DefaultComponent />}
    </div>
  );
}