我需要使由React功能组件渲染的字符串顺序包含多个空格字符。
这是我的.js文件中的函数：
function Square() {
let output = " |\n |\n |\n |\n___________|"
return(
<div className="display-linebreak">
{output}
</div>
);
}
这是它导入的.css文件中的样式规则：
.display-linebreak {
white-space: pre-line;
}
这是它当前在网页上的呈现方式：
|
|
|
|
___________|
我正在构建一个基本的井字游戏，棋盘由简单的角色组成，这是3 x 3网格的西北方，因此所有管道字符都应沿右边缘垂直对齐。
I've read about and tried lots of things to render the extra space characters I need, using stuff like "template literals" or , but nothing that's worked for others in the examples on here seems to work for me with this.
这些是我正在使用的版本：
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
