1.react的数据渲染----评论列表demo

vue和react的对比

1.v-if在react里面使用三元表达式

2.v-for在react里面使用map

import React, { Component } from 'react'
import './css/index.css'
export default class index extends Component {
  state = {
    comments: [],
    userName: '',
    userContent: '',
  }
  renderList() {
    return this.state.comments.length === 0 ? (
      <div>暂无评论</div>
    ) : (
      <ul>
        {this.state.comments.map((item) => (
          <li key={item.id}>
            <h3>{item.name}</h3>
            <p>{item.content}</p>
          </li>
        ))}
      </ul>
    )
  }
  // 表单元素处理
  handleForm = (e) => {
    const { name, value } = e.target
    this.setState({
      [name]: value,
    })
  }
  submit = () => {
    const { comments, userName, userContent } = this.state
    console.log('userName', userName)
    let res = [
      {
        id: comments.length + 1,
        name: userName,
        content: userContent,
      },
      ...comments,
    ]
    this.setState({
      comments: res,
    })
  }

  render() {
    // 解构
    const { userName, userContent } = this.state
    return (
      <div>
        <div>
          <input
            className="user"
            type="text"
            placeholder="请输入评论人"
            value={userName}
            name="userName"
            onChange={this.handleForm}
          />
          <br />
          <textarea
            className="content"
            id=""
            cols="30"
            rows="10"
            value={userContent}
            name="userContent"
            onChange={this.handleForm}
          ></textarea>
          <br />
          <button onClick={this.submit}>发表评论</button>
        </div>

        {/* 代码结构优化 */}
        {this.renderList()}

        {/* 代码结构在render比较混乱 */}
        {/* {this.state.comments.length === 0 ? (
          <div>暂无评论</div>
        ) : (
          <ul>
            {this.state.comments.map((item) => (
              <li key={item.id}>
                <h3>{item.name}</h3>
                <p>{item.content}</p>
              </li>
            ))}
          </ul>
        )} */}
      </div>
    )
  }
}

处理提交空和清空文本框

submit = () => {
    const { comments, userName, userContent } = this.state
    console.log('userName', userName)
    if (userName.trim() === '' || userContent.trim() === '')
      return alert('评论或内容不能为空！！！')
    let res = [
      {
        id: comments.length + 1,
        name: userName,
        content: userContent,
      },
      ...comments,
    ]
    // 保存并清空文本框
    this.setState({
      comments: res,
      userName: '',
      userContent: '',
    })
  }