使用 react tsx 创建新行不起作用答案

【问题标题】：Create new line with react tsx not working使用 react tsx 创建新行不起作用
【发布时间】：2021-10-15 09:31:00
【问题描述】：

我想在我的 React tsx (TypeScript) Web 应用程序的新行中设置用户名。

entry.comment 包含以下字符串：jsdkjfdjsfds
entry.username 包含以下字符串：Noah

我的代码看起来像这样，我尝试使用 \n 但这不起作用：

<div className={classes.entryContent}>
  <Typography className={classes.entryContentParagraph} variant="body2" paragraph={true}>
    <ReactMarkdown>
      {entry.comment + "\n" + entry.username}
    </ReactMarkdown>
  </Typography>
</div>

你有什么建议吗？保持新鲜！

【问题讨论】：

不确定，但我认为这里不允许要求投票，或者至少不建议这样做:)

标签： reactjs typescript react-native line-breaks

【解决方案1】：

根据这个问题和降价转换

https://github.com/remarkjs/react-markdown/issues/273

你应该在你想换行的行尾放两个空格，基本上是这样的：

line one  \nline two

这个

会给你

但是这个

会给你

【讨论】：

非常感谢它的工作，你知道我如何在我的例子中写单个单词粗体吗？ @Emanuele Scarabattoli
当然，markdownguide.org/basic-syntax/#bold 所以，粗体（用**包裹）

【解决方案2】：

由于我没有足够的声誉，我必须将其添加到答案中。

我之前没有使用过这个库，但你可以尝试添加换行标记，比如<br />。

【讨论】：

感谢您的建议，但这在括号中不起作用，它仅适用于 html 代码，Emanuele 在这里得到了解决方案。但是感谢您的帮助，我很感激。

【解决方案3】：

<div className={classes.entryContent}>
  <Typography className={classes.entryContentParagraph} variant="body2" paragraph={true}>
    <ReactMarkdown>
      <p>{entry.comment}</p>
      <p>{entry.username}</p>
    </ReactMarkdown>
  </Typography>
</div>

【讨论】：

感谢您的建议，但这不起作用，因为在我的情况下 ReactMarkdown 只接受一个参数。得到了 Emanuele 在底部的解决方案。