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。

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

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

使用多个返回

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

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

4 个答案: