在 React 函数组件中编写 switch 语句以进行渲染的正确方法是什么？答案

【问题标题】：What's the proper way to write a switch statement in a React function component for rendering?在 React 函数组件中编写 switch 语句以进行渲染的正确方法是什么？
【发布时间】：2021-07-29 02:41:06
【问题描述】：

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

目前，我正在做：

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

我想重复使用其中的一些代码。我知道如何在类组件中执行此操作（在render() 中，但在函数组件中不知道。

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

【问题讨论】：

标签： reactjs react-hooks components

【解决方案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>
  );
}

【讨论】：

在您的示例somePart = <Third /> 中，如果它不是一个简洁的组件怎么办？如果是几件事情（例如<div><p><a>.....</div>）怎么办？
由于 JSX 基本上是 javascript，它将被替换为 React.createElement，你总是必须有一个根元素，或者你可以将它作为数组返回。请记住，数组的每个元素都应该有一个唯一的键属性。所以可能是somePart = [<Third key="third"/>, <Fourth key="fourth"/>];
当我尝试您的确切示例时，{somePart} 给了我null[object Object]
在上面的示例中，没有定义条件变量 showAll 和 showConditionally 。您应该添加它们，这样示例才能正常工作
谢谢。有什么办法可以做+= 运算符，而不仅仅是赋值（somePart =...）？