如何使用 \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 1

string text line 2`);

// Output be

// "string text line 1

// string text line 2"

Answer 2

如果您碰巧使用，JSX您实际上可以使用HTML.

使用功能组件：

function TermsAndConditions() {

   return (

      <div>

         <p><strong>Paragraph in bold</stron></p>

         <p>Normal paragraph</p>

      </div>

   );

}

function Footer() {

   return <TermsAndConditions/>

};

ReactDOM.render(

   <Footer/>,

   document.getElementById('footer')

);

或者使用类组件：

function TermsAndConditions() {

   return (

      <div>

         <p><strong>Paragraph in bold</stron></p>

         <p>Normal paragraph</p>

      </div>

   );

}

class Footer extends React.Component {

   render() {

      return (

         {this.props.message}

      )

   }

}

ReactDOM.render(

   <Footer message={<TermsAndConditions/>}/>,

   document.getElementById('footer')

);

Answer 3

使用 CSS 试试这个。

.white-space-pre-line {

  white-space: pre-line

}