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>
         )
     }
}
相关文章
|
17天前
|
JavaScript 前端开发 API
详解React与Vue的性能对比
详解React与Vue的性能对比
57 0
|
1月前
|
前端开发
vue+ts或者react+ts如何使用animate.css
vue+ts或者react+ts如何使用animate.css
29 0
|
6天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
7 0
|
13天前
|
JavaScript 前端开发 索引
vue 列表渲染
vue 列表渲染
|
13天前
|
JavaScript
Vue 路由切换时页面刷新页面重新渲染
在Vue中,路由切换并不自动重新渲染页面,这可能导致传递参数到子组件时出现问题。使用`this.$route.replace(&#39;地址&#39;)`或`this.$route.push({name:&#39;地址&#39;,params:{key:value}})`进行跳转,但子组件不会响应变化。为解决此问题,需监听`$route`对象的变化,如图所示,通过`watch: {$route}`确保页面更新。
|
17天前
|
JavaScript
Vue 静态渲染 v-pre
Vue 静态渲染 v-pre
|
17天前
|
JavaScript
vue多条数据渲染(带图片)
vue多条数据渲染(带图片)
15 1
|
22天前
|
JavaScript 前端开发 算法
vue与react的区别?
vue与react的区别?
12 1
N..
|
30天前
|
JavaScript 前端开发 开发者
Vue.js的v-for指令
Vue.js的v-for指令
N..
13 1
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!