使用三元运算符反应原生自定义组件

Question

我有一个完美的代码工作和平，但我想用三元运算符编写它，我做不到。 我可以得到一些帮助。 我尝试了一种在三元运算符内有 2 个返回的形式，但它似乎不起作用。 谢谢。

 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

更新：已解决，我必须在三元运算符之前使用 return。 我没有注意到。

Answer 1

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