正则表达式在 React 中不起作用（但在控制台中起作用）

Question

我有一个正则表达式，应该在每场比赛前添加 2 个换行符。当我在任何地方测试正则表达式时，它都能完美运行。即使在我的控制台中，结果也会显示，但我在客户端遇到了麻烦。 （使用 react.js）

这是我的代码：

class Result extends Component {

render(){

const string = "8044. (a)(1)For the purposes of Title 2 (commencing with Section 8160), “stop payment notice” means the notice given by a claimant under Chapter 5 (commencing with Section 8500) of Title 2. (2)A stop payment notice given under Title 2 (commencing with Section 8160) may be bonded or unbonded. A “bonded stop payment notice” is a notice given with a bond under Section 8532. An “unbonded stop payment notice” is a notice not given with a bond under Section 8532. (3)Except to the extent Title 2 (commencing with Section 8160) distinguishes between a bonded and an unbonded stop payment notice, a reference in that title to a stop payment notice includes both a bonded and an unbonded notice. (b)For the purposes of Title 3 (commencing with Section 9000), “stop payment notice” means the notice given by a claimant under Chapter 4 (commencing with Section 9350) of Title 3. (c)A reference in another statute to a “stop notice” in connection with the remedies provided in this part means a stop payment notice.
"
const splitLaw = string.replace(
            /\([a-z0-9]\)\([a-z0-9]\)|\([a-z0-9]\)/g,
            (this.replacer = (match) => {
                console.log(match);
                return "\n\n" + match;
            }),
        );
    
    return (
    
    <div>
    <p>{splitLaw}</p>
    {console.log(splitLaw)}
    </div>
    
    );}}

这是我在控制台中得到的内容以及结果应该是什么：

8044. 

(a)(1)For the purposes of Title 2 (commencing with Section 8160), “stop payment notice” means the notice given by a claimant under Chapter 5 (commencing with Section 8500) of Title 2.

(2)A stop payment notice given under Title 2 (commencing with Section 8160) may be bonded or unbonded. A “bonded stop payment
  notice” is a notice given with a bond under Section 8532. An “unbonded stop payment notice” is a notice not given with a bond under Section 8532.

(3)Except to the extent Title 2 (commencing with Section 8160) distinguishes between a bonded and an unbonded stop payment notice, a reference in that title to a stop payment notice includes both a bonded and an unbonded notice.

(b)For the purposes of Title 3 (commencing with Section 9000), “stop payment notice” means the notice given by a claimant under Chapter 4 (commencing with Section 9350) of Title 3.

(c)A reference in another statute to a “stop notice” in connection with the remedies provided in this part means a stop payment notice.

由于客户端的某些原因，它不起作用。我尝试使用正则表达式构造函数 - 结果相同。为什么？

Answer 1

因此，如果您打开 DevTools 来检查通过它生成的 HTML，您会看到它正在实际上将您想要的内容输出到 DOM，它只是没有在视觉上进行格式化以表明是的。

解决此问题的两种方法。

选项 1，CSS：

div {
    white-space: pre-wrap;
}

选项 2：使用段落标签： 通过 '\n\n' 拆分 splitLaw 并将每个数组项括在段落标记中。由于段落标签是 display: block，这将有效地为您提供您正在寻找的结果。

splitLaw.split('\n\n').map((item, key) => {
    return <p key={key}>{item}</p>
})