如何在React功能组件中呈现if..else if...else类型？

function MyComponent(props) {
  if (props.condition) {
    return <div>条件为真时的内容</div>;
  } else {
    return <div>条件为假时的内容</div>;
  }
}

function MyComponent(props) {
  if (props.condition1) {
    return <div>条件1为真时的内容</div>;
  } else if (props.condition2) {
    return <div>条件2为真时的内容</div>;
  } else {
    return <div>条件都不满足时的内容</div>;
  }
}

function MyComponent(props) {
  return (
    <div>
      {props.condition ? (
        <div>条件为真时的内容</div>
      ) : (
        <div>条件为假时的内容</div>
      )}
    </div>
  );
}

function MyComponent(props) {
  let content;

  if (props.condition1) {
    content = <div>条件1为真时的内容</div>;
  } else if (props.condition2) {
    content = <div>条件2为真时的内容</div>;
  } else {
    content = <div>条件都不满足时的内容</div>;
  }

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