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 }} 。

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

({{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>)
    }

如果您想将其扩展到不止一个条件，嵌套多个三元运算符不是一个好习惯，但您可以通过以下方式实现

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

在我看来，你不应该使用简短的语法，因为它让代码在这种特定情况下不那么清晰。

Answer 2

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

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