React-Native：带有 if 语句的 Flatlist

Question

const [info, setInfo] = useState([
{id: '1', name: 'firstName', place: 'BER'},
{id: '2', name: 'SecondName', place: 'BER'},
{id: '3', name: 'thirdName', place: 'VIE'},
{id: '4', name: 'fourthName', place: 'VIE'},
]);

<Flatlist
data={info}
renderItems={({ items }) => (
  if (items.id < 3) {
   <Text style={{color:'red'}}>{items.name}</Text>
  }
  if else (items.id => 3) {
   <Text style={{color:'blue'}}>{items.name}</Text>
  }
)}
/>

我无法像这样使用 if else 语句，我也尝试过使用索引，但代码在这两种情况下都能编译。

我想要的是根据 'id' 不同的代码应该编译。

感谢您的帮助。

Answer 1

正确的结构是{{ item }}。

此外，在您的情况下，您不能使用短语法 return，因为您的 return 不是由单行代码定义的

({{item}}) => <YourComponent/>

到

 ({{item}}) => { 
        return <YourComponent/> 
    }

你的情况

<Flatlist
data={info}
renderItems={({ item }) => {
  if (item.id < 3) {
   return <Text style={{color:'red'}}>{item.name}</Text>
  }
  if else (items.id => 3) {
   return <Text style={{color:'blue'}}>{item.name}</Text>
  }
}}
/>

如果你想使用短语法，你也可以这样做:

   <Flatlist
    data={info}
    renderItems={({ item }) =>  item.id < 3 ?
       (<Text style={{color:'red'}}>{item.name}</Text>) :
       (<Text style={{color:'blue'}}>{item.name}</Text>)
    }

如果你想针对不止 1 个条件进行缩放，嵌套多个三元运算符不是一个好习惯，但你可以通过[=16]实现=]

condition1? <YourComponent1/> : condition2? <YourComponent2/> : <YourComponent3/>

在我看来，您不应该使用短语法，因为在这种特定情况下，它会使代码更难阅读。

Answer 2

您可以使用三元运算符? :

<Flatlist
  data={info}
  renderItems={({ items }) => (
    <Text style={{ color: items.id < 3 ? 'red' : 'blue' }}>{items.name}</Text>
  )}
/>;

React-Native：带有 if 语句的 Flatlist

React-Native: Flatlist with if statement

javascript

reactjs

react-native

expo

react-native-flatlist