Question

我有一个呈现数组的List，我怎么能放一个if条件语句？例如

if（item.ticketId === 2）{ 在if语句中，数据呈现将采用不同的颜色 }

我是否需要创建另一个功能？

           <Content>
                <ScrollView>
                <List>
                  { this.state.ticket.map((item, i) => (
                    <ListItem
                    roundAvatar
                    key={i}
                    avatar={
                      <View >
                        <Text>{item.ticketId}</Text>
                      </View>
                    }
                      title={
                        <View>
                          <Text>ROW :{item.row}</Text>
                        </View>
                      }
                      subtitle={
                        <View>
                          <Text>GATE :{item.gate}</Text>
                        </View>
                      }
                    />
                  ))
                  }
                  </List>
                </ScrollView>
              </Content>

Answer 1

您可以使用条件运算符。像这样的东西

<View >
  <Text style={item.ticketID === 2 ? style1 : style2}>{item.ticketId}</Text>
</View>

Answer 2

我建议明确将映射功能移动到另一个功能，以提高可读性。然后在其中，您可以使用标准的if / else语法或三元表达式：

renderListItem = (item, i) => {
    // you can use standard if/else
    if (item.ticketId === 2) {
        // render something you want
        return (
            <ListItem
                roundAvatar
                key={i}
                avatar={
                    <View style={customStyleObject}>
                        <Text>{item.ticketId}</Text>
                    </View>
                }
                title={
                    <View style={customStyleObject}>
                        <Text>ROW :{item.row}</Text>
                    </View>
                }
                subtitle={
                    <View style={customStyleObject}>
                        <Text>GATE :{item.gate}</Text>
                    </View>
                }
            />
        );
    } else {
        // or you can use ternary expressions for some smaller differences
        return (
            <ListItem
                roundAvatar
                key={i}
                avatar={
                    <View style={item.ticketId===3 ? customStyle : standardStyle}>
                        <Text>{item.ticketId}</Text>
                    </View>
                }
                title={
                    <View>
                        <Text>ROW :{item.row}</Text>
                    </View>
                }
                subtitle={
                    <View>
                        <Text>GATE :{item.gate}</Text>
                    </View>
                }
            />
        );
    }
}

然后在渲染方法中调用它：

render() {
    return (
        <Content>
            <ScrollView>
                <List>
                    { this.state.ticket.map(this.renderListItem) }
                </List>
            </ScrollView>
        </Content>
    );
}

如果你对更多的方法做出反应并对原生作出反应感兴趣，你可以学习它们here

列表项中的条件是React-native

2 个答案: