react项目/jsx文件里怎么用<pre>标签？

在HTML文件中，想要浏览器识别多个空格、自动换行等，一个< pre >标签干进去就可以。

<pre>
    我是陈独秀
    今天是我的场
    有你李  大   钊       什么事！！！
</pre>
复制代码

那么你在浏览器看到的效果就是：

---

那么在react项目/jsx文件中能不能这样用？ 答案是不能！！！看我代码：

    Modal.info({
      title: '话术',
      content: (
        <pre>
            我是陈独秀
            今天是我的场
            有你李  大   钊       什么事！！！
        </pre>
      ),
      onOk: () => { },
      okText: '确定',
      width: 300,
    });
复制代码

为了看的效果更直观，我用ant-design里的< Modal >来装< pre >，模态框里的内容变成这样：

不仅不换行，连多个空格都识别不出来，不能忍！ 查了很多资料才发现jsx文件中要这么用：

{`
<pre>
    我是陈独秀
    今天是我的场
    有你李  大   钊       什么事！！！
</pre>
`}
复制代码

看到这里你会以为这是教学，你错了！ 我的目的是请教一下大佬们，为什么jsx文件里不能像HTML那样用？

是个链接你们都会点，但是这里面真的没东西

转载于:https://juejin.im/post/5adb3e8ef265da0b722ab262