JSX 不渲染空格

Question

我有一個單獨的字符數組，我用它來映射一個字符串。

但是，空白被忽略了。 我如何實現這一點，以便對於我的數組中的每個“”元素，它呈現一個空白？

https://codesandbox.io/s/falling-field-wdiy6

import React from "react";

export default function App() {
  const elements = ["+", "-", " ", " ", "r"]
  return (
    <div>
      {elements}
    </div>
  );
}

Answer 1

嘗試使用 pre 標簽或 css 屬性 white-space: pre-wrap;

export default function App() {
  const elements = ["+", "-", " ", " ", "r"];
  return (
    <div>
      <pre>{elements.map(c => c)}</pre>
    </div>
  );
}

Answer 2

請注意，如果您將它們視為字符串，則實際上兩個連續的空格將在這里減少為一個，因為您直接位於 div 內。

如果您需要以某種方式顯示真實空間，您可以嘗試使用"&nbsp"而不是" " 。

要顯示，您可以將字符連接到一個字符串中，您可以執行以下操作：

export default function App() {
  const elements = ["+", "-", <>&nbsp;</> , <>&nbsp;</>, "r"];
    return (
      <div>
        {elements.map(c=>c)}
      </div>
    );
}

請注意，我將里面的<></>包裹起來，否則它會被視為普通字符串，並將按原樣呈現。

Answer 3

請使用pre tag
代碼沙盒

import React from "react";

export default function App() {
  const elements = ["+", "-", " ", " ", "r"]
  return (
    <pre>
      {elements}
    </pre>
  );
}