react评论案例

最新推荐文章于 2023-03-08 00:12:29 发布

王源偷我华子抽

最新推荐文章于 2023-03-08 00:12:29 发布

阅读量457

点赞数

分类专栏： react 文章标签：前端 react

本文链接：https://blog.csdn.net/qq_42917020/article/details/123350881

版权

本文详细介绍了如何使用React开发一个评论列表案例，包括需求分析、评论列表渲染、条件渲染及评论发布功能的实现步骤。

摘要由CSDN通过智能技术生成

评论列表案例

在这里插入图片描述

需求分析

在这里插入图片描述

步骤一渲染评论列表

在这里插入图片描述

import React from 'react';
import ReactDOM, { render } from 'react-dom';

class App extends React.Component{
  //初始化状态
  state = {
    comments:[
      {id:1,name:'jack',content:'沙发'},
      {id:2,name:'rose',content:'板凳'},
      {id:3,name:'mama',content:'楼主好人'}
    ]
  }
  render(){
    return(
      <div className='app'>
        <div>
          <input type='text' className='user' placeholder='请输入评论人'></input>
          <br></br>
          <textarear className='content'
          cols ='30'
          rows = '10'
          placeholder='请输入评论内容'
          /> <br></br>
          <button>发表评论</button>
        </div>

        <div className='no-content'>暂无评论</div>
        <ul>
          {this.state.comments.map(item=>(
            <li key={item.id}>
              <h3>{item.name}</h3>
              <p>{item.content}</p>
            </li>