如何防止 create-react-app 中的 collapseWhitespace

Question

我遇到了与React.js 渲染时如何避免 JSX 组件压缩相关的问题？ . 我想找到一种方法来避免使用{' '} 。 我在某个地方有红色，在 webpack 中将collapseWhitespace更改为false可以解决它。 是否可以实现？

Answer 1

在 JSX 内部 create-react-app 不会折叠任何空白，所以

<p>Hello   World - Hello{'   '}World</p>

将导致：

<p>Hello   World - Hello   World</p>

但是，浏览器通常会将这些空白合并为一个。 为防止出现这种情况，请像这样设置 'white-space' css 属性：

<p style={{ whiteSpace: 'pre' }}>Hello   World - Hello{'   '}World</p>

作为 html-webpack-plugin 的一部分，collapseWhitespace 属性用于 HTML 缩小。 此属性适用于 CRA，并将缩小public/index.html的内容。 为了禁用它，您必须退出。