我想在 react-native 中使用三元运算符如何修复我的代码？答案

【问题标题】：i want to use ternary operator in react-native how can i fix my code?我想在 react-native 中使用三元运算符如何修复我的代码？
【发布时间】：2021-02-22 06:49:25
【问题描述】：

你好，我想使用三元运算符

如果烹饪有我想要呈现的价值

   <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />

但是如果cookup有这样的[]

我要渲染

           <Hey>hiaaaaaa</Hey>

这是我的代码

  return (
    cookUp ?  ( 
        <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />
    ) :
        (<Hey>hiaaaaaa</Hey>)
   );

我该怎么做？如何修复我的代码？

【问题讨论】：

标签： javascript node.js reactjs react-native

【解决方案1】：

您可以在平面列表中使用 ListEmptyComponent 道具

<FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
            ListEmptyComponent={<Hey>hiaaaaaa</Hey>}
        />

这将在数据为空时呈现“hiaaaaaa”。无需经过三元运算符。

【讨论】：

【解决方案2】：

试试这样的：

    return (
    { cookUp.length > 0 ?  ( 
        <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />
    ) :
        (<Hey>hiaaaaaa</Hey>)
    }
  )

在 JSX 中编写 JS 时不要忘记使用 {}。其他只是 JavaScript，您可能应该在框架之前深入研究一下。

【讨论】：

【解决方案3】：

试试这个方法，

cookUp是一个空数组，所以你必须检查长度来验证数据是否为空。

return (
<>
    {cookUp?.length ?  ( 
        <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />
    ) :
        (<Hey>hiaaaaaa</Hey>) }
   </>
   );

【讨论】：

【解决方案4】：

空的Array 为真。

检查cookUp 是true 后，您可以在cookUp 上使用isArray 方法：

return (
    cookUp
      ? Array.isArray(cookUp)
        ? (
          <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />
      ) 
      : ( < Hey > hiaaaaaa < /Hey>));
    : null

【讨论】：

【解决方案5】：

应该很简单：

  return (
    <Fragment>
     {cookUp.length ?  ( 
        <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            // keyExtractor={(item, index) => {
            //     return `${index}`;
            // }}
            renderItem={({item}) => (
            <Hey>
                {item.name}
            </Hey>
            )}
        />
    ) :
        (<Hey>hiaaaaaa</Hey>)
   }
   </Fragment>
   );

【讨论】：