Javascript 使用三元运算符反应本机自定义组件

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

从“React”导入React；
从“./卡”导入卡；
从“react native”导入{ScrollView，View，Text}；
const CardList=（{list，onRemoveButton}）=>{
如果（list.length==0）{
返回(
好像你没事可做，放松一下，玩得开心
);
}否则{
返回(
{
list.map（（文本，i）=>{
返回(
);
})
}
);
}
}
导出默认卡片列表

从“React”导入React；
从“./卡”导入卡；
从“react native”导入{ScrollView，View，Text}；
const CardList=（{list，onRemoveButton}）=>{
return list.length？（//length>0为真值
{
list.map（（文本，i）=>{
返回(
);
})
}
) : (
好像你没事可做，放松一下，玩得开心
);
}
}
导出默认卡片列表

返回列表。长度===0？一些值：一些其他值

？

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