如果我有一个带空格的模板字符串，请说
(`${firstName},
Thanks for ordering ${product1}.
Your order has shipped.`);
如何将其呈现为html，包括空格？
我尝试过使用innerHTML，但结果却是如此
Hello Somebody, Thanks for ordering something. Your order has shipped.
<html>
<head>
<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
var firstName = "Somebody"
var product = "something"
const element = (`
Hello ${firstName},
Thanks for ordering ${product}.
Your order has shipped.
`);
document.getElementById('test').innerHTML = element;
</script>
</body>
</html>```
Expected:
Hello Somebody,
Thanks for ordering something.
Your order has shipped.
Actual results:
Hello Somebody, Thanks for ordering something. Your order has shipped.
HTML默认会折叠空格。您可以使用css white-space: pre保留空格，或者使用<br>标记替换换行符，这些标记将呈现换行符，如下所示：
document.getElementById('test').innerHTML = element.replace(/\n/g, '<br>')
您可以尝试使用pre标签而不是div标签：
<pre id="test"></pre>
既然你使用了babel，为什么不在const elements中写HTML？
const element = (
<div>
<h3>Hello ${firstName}<h3>
<p>Thanks for ordering ${product}</p>
<p>Your order has shipped.</p>
</div>
);
仅供参考，你需要先包装div