Question

设置

Python FastApi 后端服务器
JS React 前端客户端
用于前端 ws 客户端的 react-use-websocket

问题

所以我需要通过 Websocket 连接从后端 API 向前端客户端发送一些消息，并将这些消息显示给用户。但是我不知道如何在显示这些消息时转义到新行。我尝试在 Websocket 消息中发送 \n 。 JS 不会显示这个 \n 字符，但也不会切换到换行符。它只是忽略它。还尝试发送一些空格，但这也无济于事。无论我在 API 端留下多少空格，它都只显示一个空格。

代码

<块引用>

注意：TextTransition 组件来自 react-text-transition 但行为与标准 html 段落相同。

const {lastJsonMessage} = useWebSocket(socketURL);

//...

return (
    <div>
    ...
        ...
        <div style={boxStyle}>
            <h1 style={{cursor: "default"}}>Message</h1>
            <p style={{cursor: "default"}}>━━━━━━━━━━━━━━━━━</p>
            <TextTransition
                text={lastJsonMessage ? lastJsonMessage.message : ""}
                style={{cursor: "default"}}
                springConfig={ presets.stiff }
            />
        </div>
        ...
    ...
    </div>
)

我可以做什么，应该做什么？提前致谢。

Answer 1

\n 不会在 HTML 中产生一个新行。您需要改为发送 <br/>，或者用它替换客户端的 \n，例如：

<TextTransition
  text={lastJsonMessage ? lastJsonMessage.message.replace(/\n/g, '<br/>') : ""}
  style={{cursor: "default"}}
  springConfig={ presets.stiff }
  />

这里假设 TextTransition 接受 HTML（不仅仅是文本）。如果是后者，那么您可能就不走运了，因为该组件不会让您在文本中设置控制字符。

如何通过 Websocket 消息发送换行命令？

1 个答案: