如何有条件地渲染两个组件？

Question

如何有条件地渲染这两个组件？

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.

来渲染

Answer 1

我觉得你需要的是

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 如果它们属于 props 或 state。

Answer 2

这也是可以的：

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

Answer 3

您可以参考以下内容实现：

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>
);
}

Answer 4

您可以通过多种方式实现这一目标。

使用多个returns

render()
{
  if(!logedin){
    return <Text> Signup to access this content </Text>;
  }

  return( <CardComponent/> );
}

使用三元运算符

condition ? statement to execute if condition is true : statement to execute if condition is false

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

如何有条件地渲染两个组件？

How to Render Two Components Conditionally?

reactjs

react-native

react-native-android

native-base

react-native-ios