Question

我有这个文本框：

<Typography component="p" className={classes.text}>
        {this.props.post.text}
</Typography>

我希望能够包含段落，但是输入其中的所有文本都会打印在一行上。

文档建议paragraph默认为false，因此我必须将其设置为“ true”。

我尝试了以下操作：

<Typography component="p" className={classes.text} paragraph="true">

我也尝试过：

<Typography component="p" className={classes.text} paragraph={true}>

两者都不起作用，因此我的所有文本仍被打印到一行。

如何显示段落？

其他信息： 据我所知，“版式”中的section = {true}属性仅为adds a bottom-margin to the whole text。即我的一段文字是一个段落。如果我想要另一个段落，则必须添加另一个Typography。像这样：

<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text}
</Typography>
<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text2}
</Typography>

这不是我想要的。也许我应该针对的是识别输入文本中的返回字符。这是正确的吗？如果是，该怎么做？

我尝试过：

  <pre>
    <Typography component="p" className={classes.text}>
      {this.props.post.text}
    </Typography>
  </pre>

标记保留标记内部的空白和换行符。

但这不适合。如果我的行很长，文字不会以Card的宽度换行。取而代之的是，超出卡宽度的所有内容都会被截断。显然，我想要这一切。我希望将文本包裹在卡片中，并使其支持新的行和段落。怎么做？

Answer 1

我尝试了您的答案，并且根据需要可以很好地运行。但是，控制台返回一个小错误

警告：validateDOMNesting（...）：<p>不能作为后代出现的<p>。

通过用<p>替换.map()中的<Typography>标签中的<div>标签，并将其全部包裹在<div className={classes.text}> {this.props.post.text.split('\n').map((i, key) => { return <Typography key={key} paragraph variant="body1">{i}</Typography>; })} </div>中，我对您的答案有了一点改进，就像这样：

body1

（您可以将tee替换为所需的任何变体！）

这似乎摆脱了对我的警告，我希望能按您的预期工作。

Answer 2

更好的方法是使用 css 的强大功能：

white-space: pre-line

如果你使用这个 css 属性，“换行”字符将被尊重。

Answer 3

这确实是一种奇怪的行为。据我所知，您做的一切正确。 p本身显示为块元素，因此默认情况下应以所需方式显示它。但是，可能是您在.text CSS类中覆盖了它。尝试看看是否有问题。如果没有，您可以始终使用变体属性variant="headline"以便将它们放在新行上。

Answer 4

如果我做对了，您可以简单地利用HTML的功能并添加<br />元素来插入换行符。

Answer 5

我想出了这个

<Typography component="p" className={classes.text}>
  {this.props.post.text.split("\n").map((i, key) => {
    return <p key={key}>{i}</p>;
  })}
</Typography>

如果有更好的方法可以做到这一点，我很想听听。

Answer 6

对于新段落

<Typography>
  {this.props.text.split("\n").map((i, key) => {
    return <p key={key}>{i}</p>;
  })}
</Typography>

仅用于换行

<Typography>
  {this.props.text.split("\n").map((i, key) => {
    return <div key={key}>{i}</div>;
  })}
</Typography>

React Material-UI中的版式

6 个答案: