如何使用map方法在textarea标记中添加动态内容

Question

我目前正在使用套接字处理聊天应用程序，当我收到不同的消息时，我使用一个数组，然后使用map方法将它们显示在简单的html标记中，比如p等等。但是在文本区中，它不起作用，我还尝试用map方法设置文本-area值属性，但只有我看到的是E 110对象对象E 211。此外，当消息有更多消息时，我如何自动地将滚动条向下移动。

这里是代码

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;

Answer 1

只能将一个子区域(本例中的文本)传递给文本区域。但是你想要传递一个数组。如果您要做的是拥有与数组一样多的文本区域，那么您应该这样做：

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

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

但是，如果您试图拥有一个包含所有文本的文本区域，那么首先需要使用join方法创建一个长字符串，然后呈现该字符串。

Answer 2

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