在用于渲染的 React 函数组件中编写 switch 语句的正确方法是什么？

Question

我的理解是 React 函数组件 没有 render() 函数。它使用 return().

目前，我在做：

if (showAll) {
  return ( 
    <Top />
    <Middle />
    <Bottom />
  )
} else if (dontShowMiddle) {
  return (
    <Top />
    <Bottom />
  )
}
....

我想重新使用其中的一些代码。我知道如何在 class 组件中执行此操作（在 render() 中，但在功能组件中不这样做。

如果我想在 return() 中执行 switch 语句，我该怎么做？

Answer 1

实际上，您可以使用 JSX 代码在 class-base 组件的 render() 方法中执行所有操作。您可以使用内联三元运算符、逻辑 AND 或逻辑 OR 运算符，或者您可以在代码中使用变量组合它们：您可以在下面的示例中看到所有三种方法：

function MyComponent () {
  let somePart = null;
  if (condition) {
    somePart = <Third />;
  }
  return (
    <Fragment>
      <Top />
      {showAll && <Middle />}
      {showConditionally ? <First /> : <Second />}
      {somePart}
      <Bottom />
    </Fragment>
  );
}

在用于渲染的 React 函数组件中编写 switch 语句的正确方法是什么？

What's the proper way to write a switch statement in a React function component for rendering?

components

reactjs

react-hooks