如何防止 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的內容。 為了禁用它，您必須退出。