08 React中循环渲染类似Vue中 的v-for

简介: 08 React中循环渲染类似Vue中 的v-for

17==》循环数组 类似v-for


import React, { Component } from "react";
export default class CharShop  extends Component {
    // state初始化一般写在构造器当中
    constructor(props){
        super(props);
        this.state={
            goods: [
             { id: 1, text: "web111" },
             { id: 2, text: "web222" },
             { id: 3, text: "web333" }
            ]
        }
    }
     render(){
         return(
             <div>
                {/* 条年渲染  类v-for */}
                {this.state.goods.map(item=>
                  return  <li key={item.id}>{item.text}</li>
                )}
             </div>
         )
     }
}
相关文章
|
1月前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
9天前
|
缓存 JavaScript 前端开发
Nuxt.js实战:Vue.js的服务器端渲染框架
Nuxt.js提供了开发、构建和部署的完整工作流。使用nuxt命令启动开发服务器,nuxt build进行生产构建,nuxt start启动生产服务器
16 0
|
10天前
|
JavaScript
|
10天前
|
JavaScript 索引
|
10天前
|
XML JavaScript 前端开发
Vue和React的区别
Vue和React的区别
|
11天前
|
前端开发 JavaScript
REACT 条件渲染
REACT 条件渲染
|
11天前
|
JavaScript 前端开发
react的参数值和Vue的参数值有什么区别
react的参数值和Vue的参数值有什么区别
|
11天前
|
前端开发 JavaScript
vue的v-model、v-if、v-for用react语法实现
vue的v-model、v-if、v-for用react语法实现
|
13天前
|
JavaScript
Vue模板语法、属性绑定、条件渲染的学习
Vue模板语法强调插值表达式需返回结果以显示。避免问题的方法是将逻辑处理放在JS中,不在模板内实现。Vue属性绑定使用`v-bind`(可简写为:)动态绑定类或ID,当值为null或undefined时自动移除。支持布尔类型和动态绑定多值。条件渲染包括`v-if`、`v-else`、`v-else-if`和`v-show`,其中`v-if`用于真值时渲染,`v-show`按条件显示,两者的区别在于频繁切换场景和渲染方式。
|
30天前
|
前端开发 JavaScript
React中渲染html结构---dangerouslySetInnerHTML
React中渲染html结构---dangerouslySetInnerHTML
27 0