реагировать на собственные компоненты с помощью троичных операторов - PullRequest
Новая
       66

реагировать на собственные компоненты с помощью троичных операторов

0 голосов
/ 06 октября 2019

У меня отлично работает код, но я хочу написать его с помощью троичных операторов, я не могу этого сделать. Могу ли я получить помощь? Я попробовал форму с двумя возвратами внутри троичного оператора, но кажется, что он не работает. спасибо. 

import React from 'react';
import Card from './Card';

import { ScrollView, View, Text } from 'react-native';

const CardList = ({ list, onRemoveButton }) => {

  if (list.length === 0) {
    return(
      <View>
        <Text 
          style={{
            fontSize: 20,
            padding: 20,
            lineHeight: 30,
            textAlign: "center"
          }}
        >
        It seems like u have nothing to Do, Relax and Have fun</Text>
      </View>
    );
  } else {
    return(
      <ScrollView style={{paddingTop: 8}}>
      {
        list.map((text, i) => {
          return (
            <Card onRemoveButton={onRemoveButton} key={i} id={i} text={text} />
          );
        })
      }
    </ScrollView>
    );
  }
}

export default CardList

Обновление: решено! Мне пришлось использовать возврат до Ternary Operator, который я не заметил.

1 Ответ

0 голосов
/ 06 октября 2019 
import React from 'react';
import Card from './Card';
import { ScrollView, View, Text } from 'react-native';

const CardList = ({ list, onRemoveButton }) => {
  return list.length ? ( // length > 0 is truthy
      <ScrollView style={{paddingTop: 8}}>
        {
          list.map((text, i) => {
            return (
              <Card onRemoveButton={onRemoveButton} key={i} id={i} text={text} />
            );
          })
        }
      </ScrollView>
    ) : (
      <View>
        <Text 
          style={{
            fontSize: 20,
            padding: 20,
            lineHeight: 30,
            textAlign: "center"
          }}
        >
          It seems like u have nothing to Do, Relax and Have fun</Text>
      </View>
    );
  }
}

export default CardList
...