react map遍历，react native map遍历

红太狼 2022-03-01 12:46 304阅读 0赞

*  react map遍历（截取部分重要代码）

{this.state.images.map((img, i) => {
        return (
            <div className="swiperBox" key={"img" + i}>
                <p className="swiperP">
                    Updated:{img.left ? img.left.date : img.right.date}
                </p>
            </div>
        );
    })}

或者

{this.props.socks &&
                  this.props.socks.map((sock, i) => {
                    let randomId = Math.round(Math.random() * 10000);
                    let sockDiv = (
                      <Table.Row key={"sock-list" + randomId + i}>
                        <Table.Cell>{sock.mac}</Table.Cell>
                        <Table.Cell>{sock.sn}</Table.Cell>
                        <Table.Cell>{sock.authCode}</Table.Cell>
                        <Table.Cell>{sock.foot}</Table.Cell>
                      </Table.Row>
                    );
                    return sockDiv;
                  })}

*  react native map遍历（截取部分重要代码）

{this.props.forecastList && this.props.forecastList.daily_forecast && this.props.forecastList.daily_forecast.map((infor, i) => {
                        let weatherDiv =(
                            <View style={ForecastStyle.list} key={"forecast-list" + i}>
                                <View style={ForecastStyle.list1}>
                                    <Text style={ForecastStyle.list_date}>{infor[i]&&infor[i].date.split("-")[2]}日</Text>
                                    <Text style={ForecastStyle.list_day}>今天</Text>
                                </View>
                                <View style={ForecastStyle.list2}>
                                    {(infor[i]&&infor[i].cond.txt_n) === "多云" ? <Cloudy /> : null}
                                    <Text style={ForecastStyle.list_weather}>{infor[i]&&infor[i].cond.txt_n}</Text>
                                </View>
                                <View style={ForecastStyle.list3}>
                                    <Text style={ForecastStyle.list_tmp}>{infor[i]&&infor[i].tmp.min}~{infor[i]&&infor[i].tmp.max}℃</Text>
                                </View>
                            </View>
                        );
                        return weatherDiv
                    })}