组件的条件渲染

Question

我发现自己经常编写这样的代码，以避免深层嵌套语句来确定 return 值，例如：

function Warning(props){
   return <h1> Warning! </h1>
}
 
function SomeComponent(props){
   const [showAtTop, setShowAtTop] = useState(false); 
    
   //...

   const ShowWarningAtTop = showAtTop
      ? <Warning></Warning>
      : null
   const ShowAtBottom = showAtTop
      ? null
      : <Warning></Warning>


   return <div>
      {showWarningAtTop}
      <div> Main Content</div>
      {showWarningAtBottom}
   </div>
}

我对该解决方案不是 100% 满意，（重复代码，return 语句变得有些臃肿，很难查看 return 语句以了解发生了什么）并且我'担心它被认为是糟糕的风格。有没有更易读/更清晰的方法来做到这一点？

Answer 1

Shorter/simpler 使用逻辑与 (&&) 的条件渲染。

Inline If with Logical && Operator

React 忽略输出中的布尔值。仅反应组件需要到 return null 以指示它们不渲染任何内容，组件可以 return true/false 并且 React 将忽略并且不呈现文字值。

您还可以 self-close JSX 中的空标签。

function SomeComponent(props){
   const [showAtTop, setShowAtTop] = useState(false); 
    
   //...

   return (
     <div>
       {showAtTop && <Warning />}
       <div> Main Content</div>
       {showAtTop && <Warning />}
     </div>
   );
}

组件的条件渲染

Conditonal Rendering of components

coding-style

reactjs