두 구성 요소를 조건부로 렌더링하는 방법?

어떻게이 두 구성 요소를 조건부로 렌더링 할 수 있습니까?두 구성 요소를 조건부로 렌더링하는 방법?

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>

방법이 조건부 렌더링은이 상황에 대해 수행 할 수 있습니다 :

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>

는 말할 수? 이러한 구성 요소는 부울 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

두 구성 요소를 조건부로 렌더링하는 방법?

답변

관련 문제