如何使用 \n 或 <br/> 或类似的方法在 React 中格式化变量内的文本

Question

我需要使用 React 格式化变量内的文本。我需要使用 \n 或
但它不起作用，我还需要加粗标题。例如：

const termsAndConditions = "条款和条件 欢迎使用网站名称！

这些条款和条件概述了使用位于 Website.com 的 Company Name 网站的规则和条例。

通过访问本网站，我们假设您接受这些条款和条件。如果您不同意接受本页所述的所有条款和条件，请不要继续使用网站名称。

以下术语适用于这些条款和条件、隐私声明和免责声明以及所有协议：“客户”、“您”和“您的”是指您，即登录本网站并遵守公司条款和条件的人。“公司”、“我们自己”、“我们”、“我们的”和“我们”指的是我们公司。“一方”、“各方”或“我们”均指客户。

饼干

我们使用 cookie。通过访问网站名称，您同意使用 cookies 协议”；

Answer 1

我建议你使用模板文字没有模板的例子    console.log('string text line 1\n' +'string text line 2');// Output be// "string text line 1// string text line 2"模板示例console.log(`string text line 1string text line 2`);// Output be// "string text line 1// string text line 2"

Answer 2

如果您碰巧使用，JSX您实际上可以使用HTML.使用功能组件：function TermsAndConditions() {&nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p><strong>Paragraph in bold</stron></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Normal paragraph</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;);}function Footer() {&nbsp; &nbsp;return <TermsAndConditions/>};ReactDOM.render(&nbsp; &nbsp;<Footer/>,&nbsp; &nbsp;document.getElementById('footer'));或者使用类组件：function TermsAndConditions() {&nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p><strong>Paragraph in bold</stron></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<p>Normal paragraph</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;);}class Footer extends React.Component {&nbsp; &nbsp;render() {&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.props.message}&nbsp; &nbsp; &nbsp; )&nbsp; &nbsp;}}ReactDOM.render(&nbsp; &nbsp;<Footer message={<TermsAndConditions/>}/>,&nbsp; &nbsp;document.getElementById('footer'));

Answer 3

使用 CSS 试试这个。.white-space-pre-line {&nbsp; white-space: pre-line}