React系列实战篇：留言功能（一）

快来加入我们吧！

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

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

实战案例(一)：留言功能

我们学到这里，就可以简单的使用 HTML 的代码实现一个简单的留言页面。

简单展示：

image.png

创建 HTML 文件然后导入 React 依赖

这样就可以使用 React 了，使用 jsx 编写代码



  
    
    留言功能 HTML 版

创建名为 App 的 class 类

  • 创建 class 类
class App extends React.Component {
  // class 内部内容
}
  • 创建构造函数 constructor
constructor() {
  super();
  this.state = {
    message: "你知道有这么一个团队吗？他们怀揣梦想，艰苦奋斗，作为一群大学生菜鸟，放弃了平时娱乐的时间，选择一起学习，一起成长，将平时学习的笔记，心得总结为文章，目的很简单，希望可以帮助向他们一样的菜鸟们？你想了解更多吗？快搜索微信公众号：小和山的菜鸟们，加入他们吧！",
    evaluateList:
    [
      {
        imgUrl: "https://xhs-rookies.com/img/rookie-icon.png",
        nickName: "菜鸟一号",
        sendTime: "2021.05.14",
        evaluate: "这是一个即将推出系列文章的团队，我们一起期待他们的作品吧！",
      },
    ],
    inputMess: "",
  };
}
  • 编写 render 函数
render() {
  return (
    

      
Hello React

      
{this.state.message}

      

        
大伙的评论

          {/* 遍历留言列表 */}
          {this.state.evaluateList.map((item) => {
          return (
            

              
              

                

                  
{item.nickName}

                  
{item.sendTime}

                

                
{item.evaluate}

              

            

          );
        })}
      

      {/* 留言输入框 */}