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

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

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。

渲染

我认为您需要的是

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如果它们属于道具或状态。

这也是可能的：

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

您可以通过引用下面的参考：

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

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

使用多个返回

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

使用三元操作员

条件？如果条件为 true ：如果条件为 false
，则要执行执行

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

相关内容

最新更新

热门标签：