React全Hook项目实战在线聊天室历程（二）

前文
React全Hook项目实战在线聊天室历程（一）

继续填充功能

在线用户列表属于比较非核心的功能，之后再写。

回复功能

功能描述：点击每个帖子后面的No号，将No号复制进表单的文本域，添加如下>>No.123并回车，之后再根据这个No号的引用获取回复的贴子的内容。

首先写个后端接口用来后续查看引用的帖子的内容。

// db.js
function getMessageByNo(no, callback) {
   
    let sql = "select * from message where no=? ;"
    try {
   
        conn.query(sql, [no], (err, res) => {
   
            if (err) {
   
                console.log('-----------error---------');
                console.error(err);
                callback(undefined);
            } else {
   
                console.log('------------success------------');
                console.log(res);
                callback(res);
            }
        })
    } catch (error) {
   

    }
}
// ws.js
router.get("/getbyno", (req, res) => {
   
    res.setHeader('Access-Control-Allow-Origin', '*');
    db.getMessageByNo(req.query.no, (result) => {
   
        if (result !== undefined) {
   
            res.end(JSON.stringify({
   
                "success": true,
                "data": result[0]
            }))
        } else {
   
            res.end(JSON.stringify({
   
                'success': false,
                data: null
            }))
        }
    })
})

好，先写一个接口就足够。

接下来是前端的回复功能，分为两个部分，一个是点击No号添加到文本域，二是当鼠标移动到引用的No号时展示出引用的内容。

效果如下gif图：

这里考虑到出现引用的内容可以复用MsgBox组件，那么就需要尽量把点击No号修改文本域的功能提出到比SubmitContainer更高的组件，即App.js上，想来想去，但是如果用props的方式不断传，现在层数已经很高了，会很麻烦，看了下官方的HOOK里有个usecontext可以打破层层传递的限制，于是就决定是你了。

新增一个组件Repost表示被引用的绿色内容

import {
    useRef, useState } from "react";
import MsgBox from "./MsgBox";

function Repost(props)