React-markdown 为什么总把我的换行符渲染成空格啊

img


在项目中react-markdown 会把连续的换行渲染出来导致间距过大

img


在练习demo 中不会，想要这种效果
首先说结果都是后端返回的，直接调openai 接口获取的数据

参考GPT的回答内容，React-markdown 库默认情况下将行末两个空格和换行符解释为硬换行符，也就是会将它们渲染为
标签。

如果你想保留所有的换行符并渲染为
标签，可以使用 React-markdown 的 breaks 属性来实现：

import ReactMarkdown from 'react-markdown';

function MyComponent({ content }) {
  return <ReactMarkdown source={content} escapeHtml={false} breaks={true} />;
}

上述代码中，breaks 属性被设置为 true，这会将所有的换行符解释为
标签。

如果你想将行末两个空格和换行符解释为硬换行符，可以将 breaks 属性设置为 false，同时在 Markdown 文本中每行末尾加上两个空格。

如果你不希望行末两个空格和换行符被解释为硬换行符，也不想将它们渲染为
标签，可以将 breaks 属性设置为 false，并且在 Markdown 文本中每行末尾只加上一个空格。

回答不易，还请采纳！！！

React-markdown 在渲染 Markdown 文本时，默认会将连续的换行符转换成一个空格。这是因为 Markdown 中，单个换行符通常被解释为在同一段落中插入一个换行符，而需要在段落之间插入空行。因此，React-markdown 认为将连续的换行符转换成空格可以更好地表现这种语义。

如果你希望 React-markdown 保留换行符而不是转换成空格，可以使用 breaks 属性，将其设置为 true。例如：


import ReactMarkdown from 'react-markdown';

const markdown = '这是一段\n包含\n多个换行符的文本。';

function App() {
  return <ReactMarkdown source={markdown} breaks={true} />;
}

参考GPT和自己的思路，React-markdown将多个换行符视为一个空格的行为是其默认行为。如果您希望保留换行符，请使用breaks prop，该prop会将单个换行符渲染为
标签。您可以将其设置为true，以便在Markdown文本中保留单个换行符的位置：

<ReactMarkdown breaks={true}>YOUR MARKDOWN HERE</ReactMarkdown>

或者，您可以使用escapeHtml prop，该prop会将所有HTML字符实体转义为其实体名称或数字，这将保留换行符：

<ReactMarkdown escapeHtml={false}>YOUR MARKDOWN HERE</ReactMarkdown>