react map遍历，react native map遍历

版权声明：本人原创，码字辛苦，整理代码更是辛苦，转发请说明原处https://blog.csdn.net/qq_37815596谢谢！ https://blog.csdn.net/qq_37815596/article/details/88744319

• 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
                })}