0

我目前正在使用套接字开发聊天应用程序，当我收到不同的消息时，我使用一个数组，然后使用 map方法以简单的 html 标签（如p等）显示它们，它运行良好，但在文本区域内它不工作我也尝试设置具有 map 方法的文本区域值属性，但只有我看到的是[object object]。当消息有更多消息时，我如何自动向下移动滚动条。

这是代码

import { Fragment, useEffect } from "react";
import { format } from "date-fns";
const Chat = ({ name, message }) => {
  const date = new Date();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();

  console.log("so bteay", message);
  return (
    <Fragment>
      <div>
        <h3 className="d-inline-block me-3"> Chat log </h3>
        {name && (
          <span className="me-3 d-inline-block">
            <div
              class="spinner-grow spinner-grow-sm text-success"
              style={{ fontSize: "10px" }}
              role="status"
            >
              <span class="visually-hidden">Loading...</span>
            </div>
          </span>
        )}
        <small className="text-muted d-block  "> {name}</small>
        <textarea
          cols="70"
          rows="8"
          value={message.map((eachMsg) => {
            return (
              <Fragment>
                {
                  <small className="text-muted d-inline-block">{`${hour}:${minute}:${second}`}</small>
                }
                <p
                  className="d-block shadow p-1 fw-bold rounded text-success"
                  style={{ fontFamily: "cursive" }}
                >
                  {eachMsg}
                </p>
              </Fragment>
            );
          })}
        ></textarea>
      </div>
    </Fragment>
  );
};

export default Chat;
4

2 回答 2

0

我认为您不能在 textarea 中设置 html 代码，除非您想将其显示为文本？

于 2021-09-25T10:52:37.930 回答
0

您只能将 1 个孩子（在这种情况下为文本）传递给文本区域。但是您正在尝试传递一个数组。如果您的意思是拥有与数组一样多的 textareas，那么您应该这样做：

const texts = ["Hi", "Bye","done"];

<div>
      {texts.map((text) => (
        <textarea>text</textarea>
      ))}
</div>

但是如果您尝试在其中包含所有文本的 1 个文本区域，首先您需要使用join方法创建一个长字符串，然后渲染该字符串。

于 2021-09-25T11:02:26.107 回答