干净的代码易于阅读，简单易懂，而且组织整齐。在这篇文章中，列举了一些平时可能需要关注的点。

如果你不同意其中任何一条，那也完全没问题。

只对一个条件进行条件性渲染

如果你需要在一个条件为真时有条件地呈现一些东西，在一个条件为假时不呈现任何东西，不要使用三元运算符。使用&&运算符代替。

糟糕的例子:

1. import React, { useState } from 'react' 
2.  
3. export const ConditionalRenderingWhenTrueBad = () => { 
4.   const [showConditionalText, setShowConditionalText] = useState(false) 
5.  
6.   const handleClick = () => 
7.     setShowConditionalText(showConditionalText => !showConditionalText) 
8.  
9.   return ( 
10.     <div> 
11.       <button onClick={handleClick}>Toggle the text</button> 
12.       {showConditionalText ? <p>The condition must be true!</p> : null} 
13.     </div> 
14.   ) 
15. } 

 好的例子:

1. import React, { useState } from 'react' 
2.  
3. export const ConditionalRenderingWhenTrueGood = () => { 
4.   const [showConditionalText, setShowConditionalText] = useState(false) 
5.  
6.   const handleClick = () => 
7.     setShowConditionalText(showConditionalText => !showConditionalText) 
8.  
9.   return ( 
10.     <div> 
11.       <button onClick={handleClick}>Toggle the text</button> 
12.       {showConditionalText && <p>The condition must be true!</p>} 
13.     </div> 
14.   ) 
15. } 

 有条件的渲染是指在任何条件下

如果你需要在一个条件为真时有条件地呈现一个东西，在条件为假时呈现另一个东西，请使用三元运算符。

糟糕的例子:

1. import React, { useState } from 'react' 
2.  
3. export const ConditionalRenderingBad = () => { 
4.   const [showConditionOneText, setShowConditionOneText] = useState(false) 
5.  
6.   const handleClick = () => 
7.     setShowConditionOneText(showConditionOneText => !showConditionOneText) 
8.  
9.   return ( 
10.     <div> 
11.       <button onClick={handleClick}>Toggle the text</button> 
12.       {showConditionOneText && <p>The condition must be true!</p>} 
13.       {!showConditionOneText && <p>The condition must be false!</p>} 
14.     </div> 
15.   ) 
16. } 

 好的例子:

1. import React, { useState } from 'react' 
2.  
3. export const ConditionalRenderingGood = () => { 
4.   const [showConditionOneText, setShowConditionOneText] = useState(false) 
5.  
6.   const handleClick = () => 
7.     setShowConditionOneText(showConditionOneText => !showConditionOneText) 
8.  
9.   return ( 
10.     <div> 
11.       <button onClick={handleClick}>Toggle the text</button> 
12.       {showConditionOneText ? ( 
13.         <p>The condition must be true!</p> 
14.       ) : ( 
15.         <p>The condition must be false!</p> 
16.       )} 
17.     </div> 
18.   ) 
19. } 

 Boolean props

一个真实的props可以提供给一个组件，只有props名称而没有值，比如：myTruthyProp。写成myTruthyProp={true}是不必要的。

糟糕的例子:

1. import React from 'react' 
2.  
3. const HungryMessage = ({ isHungry }) => ( 
4.   <span>{isHungry ? 'I am hungry' : 'I am full'}</span> 
5. ) 
6.  
7. export const BooleanPropBad = () => ( 
8.   <div> 
9.     <span> 
10.       <b>This person is hungry: </b> 
11.     </span> 
12.     <HungryMessage isHungry={true} /> 
13.     <br /> 
14.     <span> 
15.       <b>This person is full: </b> 
16.     </span> 
17.     <HungryMessage isHungry={false} /> 
18.   </div> 
19. ) 

 好的例子:

1. import React from 'react' 
2.  
3. const HungryMessage = ({ isHungry }) => ( 
4.   <span>{isHungry ? 'I am hungry' : 'I am full'}</span> 
5. ) 
6.  
7. export const BooleanPropGood = () => ( 
8.   <div> 
9.     <span> 
10.       <b>This person is hungry: </b> 
11.     </span> 
12.     <HungryMessage isHungry /> 
13.     <br /> 
14.     <span> 
15.       <b>This person is full: </b> 
16.     </span> 
17.     <HungryMessage isHungry={false} /> 
18.   </div> 
19. )