【React】 10课 react实现QQ聊天框效果

最新推荐文章于 2024-08-18 10:23:49 发布

原创最新推荐文章于 2024-08-18 10:23:49 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 专栏收录该内容

29 篇文章

订阅专栏

react实现QQ聊天框效果如下：

首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件

npm init -y
npm i babel-standalone -D
npm i react react-dom -D

安装配置文件教程链接：https://blog.youkuaiyun.com/qq_41614928/article/details/93771657
安装完成后我们开始编写下面代码

实现代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>qq聊天框</title>
  <style>
    * {margin: 0; padding: 0;}
    #app {
      width: 500px;
      border: 1px solid #000;
      text-align: center;
    }
    h2 {
      background-color: #dee1e6;
      cursor: pointer;
    }
    ul li {
      background-color: #f1f2f3;
      margin-bottom: 1px;
      padding: 10px 0;
      text-align: left;
    }
  </style>
</head>

<body>
  <!-- 所有的页面代码都是放在这里面 -->
  <div id="app"></div>
  <!-- 用于解析jsx的代码 babel引用应在前面 -->
  <script src="./node_modules/babel-standalone/babel.js"></script>
  <!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
  <script src='./node_modules/react-dom/umd/react-dom.development.js'></script>
  <!-- 引入存放数据的js文件data.js 数据都在dataList对象内 -->
  <script src="./data.js"></script>
  <!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
  <script type='text/babel'>

    class App extends React.Component{
      state = {
        //设置好友列表展开显示
        arr:[true,false,false]
      }
      //点击按钮 展开/闭合 好友列表
      handleClick=(index)=>{
        const arr = this.state.arr;
        arr[index] = !arr[index];
        //将数据重新渲染到页面上
        this.setState({
          arr:arr
        })
      }
      getData=()=>{
        //拿到引入的data.js中的数据
        return dataList
      }

      render(){
        const data = this.getData();
        return(
          <div>{
            //获取data内的第一层对象名
            Object.keys(data).map((item,index)=>{
              return(
                <div key={index}>
                  <h2 onClick={ this.handleClick.bind(this,index) }> {data[item].name} </h2>
                  {
                    //当arr对应的列表为true时就遍历下面的列表显示 否则不显示
                    this.state.arr[index] && <ul>
                      {
                        data[item].list.map((item,index)=>{
                          return(
                            <li key={index}> {item.name}-({item.gender})  个性签名：{item.introduce} </li>
                          )
                        })
                      }
                    </ul>
                  }
                </div>
              )
            })
          }</div>
        )
      }
    }

    ReactDOM.render(
      <App />,
      document.getElementById('app')
    )
  </script>
</body>
</html>

存放好友数据的data.js代码如下：

const dataList = {
  "colleagues": {
    "name": "同学",
    "list": [
      {
        id: Math.random(),
        "name": "小衲",
        "gender": "女",
        "introduce": "未成年的宝宝"
      },
      {
        id: Math.random(),
        "name": "心艾",
        "gender": "男",
        "introduce": "同为未成年的宝宝"
      },
      {
        id: Math.random(),
        "name": "乌拉拉",
        "gender": "女",
        "introduce": "大家心目中的代码女神"
      }
    ]
  },
  "netFriend": {
    "name": "明星",
    "list": [
      {
        id: Math.random(),
        "name": "周星弛",
        "gender": "男",
        "introduce": "经典电影"
      },
      {
        id: Math.random(),
        "name": "李连杰",
        "gender": "男",
        "introduce": "功夫皇帝"
      }
    ]
  },
  "students": {
    "name": "闺蜜",
    "list": [
      {
        id: Math.random(),
        "name": "小红",
        "gender": "女",
        "introduce": "能吃"
      },
      {
        id: Math.random(),
        "name": "太阳",
        "gender": "女",
        "introduce": "能睡"
      },
      {
        id: Math.random(),
        "name": "蕊蕊",
        "gender": "女",
        "introduce": "能逗"
      }
    ]
  }
}