哪種方式最適合 React Native 中的條件渲染？

Question

有條件渲染時，通過display: none顯示和刪除會更好嗎

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

或者

像這樣調用 function 會更好：

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

    }
    else
    {
        return
    }

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

Answer 1

根據我所看到的個人經驗和反應項目，有條件地渲染組件的一種有效/可信的方法是

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

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

Answer 2

如果是顯示或不顯示的問題，我通常會使用三元表達式。

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

返回 null 不會渲染任何東西。

Answer 3

您提供的返回<View></View>或null的示例比通過display切換樣式更習慣於做出反應。

Answer 4

如果您使用的是功能組件，那么最新的方法會更容易，因為，

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

</View>

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

Rest 您必須查看功能組件