关于javascript:React系列实战篇留言功能二

快来退出咱们吧！

“ 小和山的菜鸟们 ”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (https://xhs-rookies.com/) 进行学习，及时获取最新文章。

“Code tailor”，如果您对咱们文章感兴趣、或是想提一些倡议，微信关注 “小和山的菜鸟们” 公众号，与咱们取的分割，您也能够在微信上观看咱们的文章。每一个倡议或是同意都是对咱们极大的激励！

实战案例(二)：留言性能改良

学到这里，咱们把下面案例给批改一下，不要通过原始的 html 加 CDN 的办法引入 React，咱们来采纳 React 给咱们提供的脚手架来改写一下上次的内容。

创立一个空的 react 我的项目

首先咱们应用 react 官网提供的脚手架来创立一个工程

npm create react-app appname

留神： 在创立工程的时候兴许会呈现卡住的状况，请保障网络晦涩的状态下创立。

组件化开发

咱们先将之前的 html 中的输入框和展现框形象成为组件。

InputCompoent 输入框组件

该输入框组件须要预留一个办法，将输出的内容传输到父组件中，因而咱们须要预留一个名为 sendSubmit 的办法，从内部传入，并通过回调的办法进行父子组件通信。

import React, {Component} from 'react'
import './InputComponent.css'

export default class InputCompoent extends Component {constructor() {super()
    this.state = {inputMess: '',}
  }
  render() {
    return (
      <div className="sendEvaluate">
        <img className="headImg" src="https://xhs-rookies.com/img/rookie-icon.png" alt="" />
        <div className="inputBox">
          <textarea
            className="inputText"
            placeholder="请输出评论..."
            value={this.state.inputMess}
            onChange={(e) => this.getEvaluate(e)}
          />
          <div className="sendSubmit" onClick={() => this.sendSubmit()}>
            发表
          </div>
        </div>
      </div>
    )
  }
  // 获取输出内容
  getEvaluate(e) {
    this.setState({inputMess: e.target.value,})
  }
  // 点击执行提交
  sendSubmit() {this.props.sendSubmit(this.state.inputMess)
    // 清空输入框内容
    this.setState({inputMess: '',})
  }
}

EvaluateCompoent 列表展现组件

咱们只须要给 EvaluateCompoent 组件传输一个名为 evaluateList 的属性列表，返回给咱们这些评论的内容。

import React, {Component} from 'react'
import './EvaluateCompoent.css'

export class EvaluateCompoent extends Component {render() {
    return (
      <div className="evaluateBox">
        <div className="titleText"> 大伙的评论 </div>
        {/* 接管留言列表参数并遍历展现 */}
        {this.props.evaluateList.map((item) => {
          return (
            <div className="evaluateItem">
              <img className="headImg" src={item.imgUrl} alt="" />
              <div className="senderProfile">
                <div className="nickNameBox">
                  <div className="nickName">{item.nickName}</div>
                  <div className="sendTime">{item.sendTime}</div>
                </div>
                <div className="evaluate">{item.evaluate}</div>
              </div>
            </div>
          )
        })}
      </div>
    )
  }
}

export default EvaluateCompoent

组合该两个组件并展现进去

咱们批改 App.js 并将内容组合起来。

咱们将回调获得的内容搁置于主页面的 state 中，并将该 state 中的内容传输给 EvaluateCompoent 展现组件进行展现。

import React, {PureComponent} from 'react'
import EvaluateCompoent from './components/EvaluateCompoent/EvaluateCompoent'
import InputCompoent from './components/InputComponents/InputCompoent'
import './App.css'

export class App extends PureComponent {constructor(props) {super(props)
    this.state = {
      evaluateList: [
        {
          imgUrl: 'https://xhs-rookies.com/img/rookie-icon.png',
          nickName: '菜鸟一号',
          sendTime: '2021.05.14',
          evaluate: '这是一个行将推出系列文章的团队，咱们一起期待他们的作品吧！',
        },
      ],
      message:
        '你晓得有这么一个团队吗？他们怀揣幻想，艰苦奋斗，作为一群大学生菜鸟，放弃了平时娱乐的工夫，抉择一起学习，一起成长，将平时学习的笔记，心得总结为文章，目标很简略，心愿能够帮忙向他们一样的菜鸟们？你想理解更多吗？快搜寻微信公众号：小和山的菜鸟们，退出他们吧！',
    }
  }
  render() {
    return (
      <div className="root">
        <div className="title">Hello React</div>
        <p className="content">{this.state.message}</p>
        <EvaluateCompoent evaluateList={this.state.evaluateList} />
        <InputCompoent sendSubmit={(e) => this.sendSubmit(e)} />
      </div>
    )
  }

  sendSubmit(e) {
    let data = {
      imgUrl: 'https://xhs-rookies.com/img/rookie-icon.png',
      nickName: '菜鸟一号',
      sendTime: '2021.05.14',
      evaluate: e,
    }
    this.setState({evaluateList: [data, ...this.state.evaluateList],
    })
  }
}

export default App

源码地址

我的项目 github 地址

间接预览

咱们倡议采纳 codesanbox 的模式能够在线快速访问以后实战案例。

CodeSandBox

下节预报

本节咱们使用了 React 脚手架、组件化的思维重写了之前的留言板实战案例，在下一个章节咱们将持续学习 React 中组件化通信的内容，敬请期待！