2つのコンポーネントを条件付きでレンダリングする方法は？

これらの2つのコンポーネントを条件付きでレンダリングするにはどうすればよいですか？2つのコンポーネントを条件付きでレンダリングする方法は？

import React, { Component } from 'react'; 
import { Container, Header, Content, Card, CardItem, Text, Body } from 'native-base'; 
export default class CardHeaderFooterExample extends Component { 
    render() { 

    return (
     <Card> 
     <CardItem header> 
      <Text>NativeBase</Text> 
     </CardItem> 
     <CardItem> 
      <Body> 
      <Text> 
       //Your text here 
      </Text> 
      </Body> 
     </CardItem> 
     <CardItem footer> 
      <Text>GeekyAnts</Text> 
     </CardItem> 
     </Card>

言うことができます：

if logedin={true} 
    return 
    <Card> 
     <CardItem header> 
     <Text>NativeBase</Text> 
     </CardItem> 
     <CardItem> 
     <Body> 
      <Text> 
      //Your text here 
      </Text> 
     </Body> 
     </CardItem> 
     <CardItem footer> 
     <Text>GeekyAnts</Text> 
     </CardItem> 
    </Card> 

else return 

    <Text> signup to access this content </Text>

はどのようにこのような状況のために行われ、この条件付きレンダリングすることができますか？これらのコンポーネントはブール値logedinに基づいてレンダリングする必要があります。

出典

2017-12-08 Artur

私は何が必要だと思う彼らは小道具や状態に属している場合

return logedin==true ? (
    <Card> 
    <CardItem header> 
     <Text>NativeBase</Text> 
    </CardItem> 
    <CardItem> 
     <Body> 
     <Text> 
      //Your text here 
     </Text> 
     </Body> 
    </CardItem> 
    <CardItem footer> 
     <Text>GeekyAnts</Text> 
    </CardItem> 
    </Card> 
) : (
    <Text> signup to access this content </Text> 
)

はthis.props.logedinかthis.state.logedinへの変更を覚えています。

出典

2017-12-08 10:22:01 Val

これも可能です：

return (
    { logedin && <YourComponentWhenLogedinIsTrue/> } 
    { ! logedin && <YourComponentWhenLogedinIsFalse/> } 
);

出典

2017-12-08 13:31:51

あなたは下に参照していることを達成することができます：

render() { 
    var1 = 
    <Card> 
     <CardItem header> 
     <Text>NativeBase</Text> 
     </CardItem> 
     <CardItem> 
     <Body> 
      <Text> 
      //Your text here 
      </Text> 
     </Body> 
     </CardItem> 
     <CardItem footer> 
     <Text>GeekyAnts</Text> 
     </CardItem> 
    </Card> 

var2 = <Text> signup to access this content </Text> 

return(
    <View> 
    {logedin == true 
    ? var1 
    : var2 
    } 
    </View> 
); 
}

出典

2017-12-08 13:46:13

あなたはさまざまな方法でこれを達成することができます。三オペレータ

条件を用い
使用して、複数の戻り
render() 
{ 
    if(!logedin){ 
    return <Text> Signup to access this content </Text>; 
    } 

    return(<CardComponent/>); 
} 
？ステートメントが実行する条件が偽

render() 
    { 
     return islogedin ? <CardComponent/> : <Text> Signup to access this content </Text>; 
    }

の場合：条件が真である場合に実行するステートメント

出典

2017-12-08 17:38:46

2つのコンポーネントを条件付きでレンダリングする方法は？

答えて

関連する問題