如何在React Js中使空白区算作字符

Question

我有一个带有空白字符串的数组，如下所示：

let myArr=["Hello       ", "Bonjour      ", "Buenos dias      "]

当我检查每个字符串的长度时，字符计数也包括空白，但当我在代码中使用这些字符串时，它们没有空白，例如，当我通过数组映射以显示像这样的字符串时

myArr.map((h) => h)

在console.log中，字符串长度包括空格，但当我试图在代码中显示它们时，它们显示时没有空格，所以它显示为没有空格的Hello而不是**Hello//应该有很多空格**。

如何使空白的长度和宽度与字符相同？我需要显示每个字符串的长度与数组中的长度相同(后面有相同的空格(。

Answer 1

如果您试图在html中呈现它。尝试使用pre标记或css属性空白：预包装；

return (
<div>
<pre>{myArr.map((h) => h)}</pre>
</div>
);

Answer 2

我使用了下面的代码，可以显示html中的空格。

class TestArray extends React.Component {
render() {
let myArr=["Hello    1", "Bonjour  2", "Buenos dias      3"];
return (<div>{myArr.map(h =><h1><pre>{h.length}{`${h}How are you?`}</pre></h1>)}
</div>)
}
}

ReactDOM.render(
<TestArray />,
document.getElementById('root')
);