好客租房41-react组件基础综合案例-渲染列表数据

简介: 好客租房41-react组件基础综合案例-渲染列表数据

1渲染列表

在state定义数据

进行数据渲染

//导入react

import React from 'react'

import ReactDOM from 'react-dom'

//导入组件

// 约定1:类组件必须以大写字母开头

// 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性

// 约定3:组件必须提供render方法

// 约定4:render方法必须有返回值

class HelloWorld extends React.Component {
     //初始化状态
     state={
         comments:[{
             id:1,name:"geyao",content:"哈哈"
         },{
             id:2,name:"fangfang",content:"哈哈"
         },{
             id:3,name:"geyao",content:"哈哈"
         }]
     }
     render() {
         return (
             <div className="app">
                 <div>
                     <input
                         className="user"
                         type="text"
                         placeholder="请输入评论人"
                     />
                     <br />
                     <textarea
                         className="content"
                         cols="30"
                         rows="10"
                         placeholder="请输入评论列表"
                     ></textarea>
                     <br />
                     <button>发表评论</button>
                 </div>
                 <div className="no-comment">暂无评论,快去评论吧~</div>
                 <ul>
                     {/* <li>
                         <h3>评论人:jack</h3>
                         <h3>评论内容:沙发</h3>
                     </li> */}
                     {this.state.comments.map(item=>(
                         <li key={item.key}>
                         <h3>评论人:{item.name}</h3>
                         <p>评论内容:{item.content}</p>
                     </li>
                     )
                     )}
                 </ul>
             </div>
         )
     }
 }
 ReactDOM.render(<HelloWorld />, document.getElementById('root'))

运行结果

image.png

相关文章
|
2天前
|
移动开发 前端开发 API
React 拖拽组件 Drag & Drop
本文介绍了在 React 中实现拖拽功能的方法,包括使用原生 HTML5 Drag and Drop API 和第三方库 `react-dnd`。通过代码示例详细讲解了基本的拖拽实现、常见问题及易错点,帮助开发者更好地理解和应用拖拽功能。
20 9
|
1天前
|
设计模式 前端开发 编译器
与普通组件相比,React 泛型组件有哪些优势?
与普通组件相比,React 泛型组件有哪些优势?
15 6
|
9天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
24 2
|
16天前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件(HOC)是 React 中一种复用组件逻辑的方式,通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题,包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案,并提供了具体的 React 代码示例。通过本文,读者可以更好地理解和应用 HOC,提高代码的复用性和可维护性。
41 8
|
15天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
3天前
|
前端开发 UED
React 模态框 Modal 组件详解
【10月更文挑战第27天】本文介绍了如何在 React 中实现一个功能完善的模态框组件。从基础概念入手,逐步讲解了简单的模态框实现、CSS 样式、传递子组件、键盘事件处理等高级功能。同时,还探讨了常见问题及易错点,如背景点击关闭、键盘事件冲突和动画效果。通过本文,读者可以全面了解 React 模态框组件的实现细节。
10 0
|
27天前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
16 1
|
26天前
|
前端开发 JavaScript API
React 列表 & Keys
10月更文挑战第9天
14 0
|
27天前
|
前端开发 JavaScript API
React将组件作为属性传递的最佳实践
本文探讨了在React中将组件作为属性传递的三种常见方式:作为元素传递、作为组件传递、作为函数传递。通过构建带图标的按钮组件,对比分析了每种方式的优缺点,最终推荐将组件作为函数传递,因为它提供了更好的可控性、灵活性和可扩展性。
31 0
|
28天前
|
JavaScript 前端开发 算法
写 React / Vue 项目时为什么要在列表组件中写 key
在React或Vue项目中,为列表组件中的每个元素添加唯一的key属性,有助于框架高效地更新和渲染列表。Key帮助虚拟DOM识别哪些项已更改、添加或删除,从而优化性能并减少不必要的重新渲染。