反应文本道具换行符

Question

所以我有一个名为data的道具，它以字符串作为参数，例如

<MyComp 
  data="Some text, some other text"
/>

在Some text,之后，如何添加换行符？一个简单的转义/ n标签会起作用（我的意思是，这是最佳实践吗？）

Answer 1

您始终可以使文本成为组件的子项。

<MyComp>
  <div>
    <p>Here I'd like one line</p>
    <p>Here I'd like another line</p>
  </div>
</MyComp>

然后在MyComp中，您可以只显示{props.children}

Answer 2

这完全取决于您将如何使用data道具。转义字符（\n）在JSX中不起作用。在这种情况下，我建议将线分割成多个道具，或者传递带有多线的数组。

但是，如果要将其用于诸如textarea之类的输入元素，则可以使用转义字符。

Answer 3

如果您的目标是直接渲染文本，则\n将不起作用。

例如，您可以在呈现功能的末尾添加一个<br/>标签：

const MyComp = ({ data }) => <p>{data}<br/></p>

如果是可选的，则可以添加一个布尔属性：

<MyComp 
  data="Some text, some other text"
  break={true}
/>

const MyComp = ({ data, break }) => <p>{data}{break && <br/>}</p>

另一种方法是使用嵌套组件，以提高灵活性：

<MyComp>
    <p>
        Some text, some other text<br/>
    </p>
</MyComp>

const MyComp = ({ clidren }) => children

但是，如果您只是想在其他地方发送此文本，可以添加\n。