Javascript 在React Native中，哪种方式最适合条件渲染？

有条件渲染时，是否最好通过

display:none

<View style={{display: props.shouldShow ? 'flex':'none'}}>
     ......
</View>

......

或

调用这样的函数是否更好：

const showComponent = (props) => {
    if (props.shouldShow)
    {
        return (<View> ... </View)

    }
    else
    {
        return
    }

}
...
...
const Thingy = (props) => {
    return(
        <View>
            showComponent(props)
        </View>
    )
}

常量showComponent=（道具）=>{
如果（道具应显示）
{
返回（{
返回(
展示组件（道具）
)
}

根据我的个人经验和react项目，有条件地呈现组件的一种有效/可信的方法是

const showComponent = props.shouldShow ? (<View>...</View>) : null

return(
   <div>
      {showComponent}
   </div>

const showComponent=props.shouldShow？（…）：null
返回(
{showComponent}

如果是显示或不显示的问题，我通常会使用三元表达式

render(){
  let display = ( ...some expression )
  return(
    display ? <View>Hello</View > : null
  );
}

render（）{
let display=（…某个表达式）
返回(
显示？您好：空
);
}

---

返回null不会呈现任何内容。

您提供的示例返回

或

null

比通过

display

切换样式反应更为惯用。如果您使用的是功能组件，那么最新的方法更容易：

return (
<View style={Condition ? Styles.A : Styles.B}>

</View>

)
const Styles = StyleSheet.create({ A: { display:"none" }, B:{ display:"flex" } } )

返回(
)
const Styles=StyleSheet.create（{A:{display:“none”}，B:{display:“flex”}）

---

Rest您必须查看功能组件

您的意思是性能更好吗？感谢您的回答！在查看这两种方法时，是否有性能方面的考虑因素？我认为切换显示更具可读性。