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

Posted 2023-02-23

【中文标题】在 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 语句，我该怎么做？

【参考方案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 =...）？