将字符传递给组件会忽略 React Js 中的空格

Question

我一直在研究一个接受段落（字符串）并将每个字符传递给另一个的 React 组件。但是当我在 Tailwind CSS 中使用 flex 时，空格似乎没有出现。如果没有 flex，所有字符都会垂直显示。这里 apiResponse 是带空格的字符串。

return(
  <div className="w-3/4 flex flex-wrap">
      {apiResponse.split('').map(function(char, index){
        return <Character key={index}>{char}</Character>;
    })}
  </div>

)

字符组件的代码是

const Character = (props) => {
    return(
        <div className="bg-green-100">
            {props.children}
        </div>
    )
}

export default Character;

如何使用 Tailwind CSS 纠正此错误？还是JS代码有问题？

Answer 1

只有 space 的 Div 被视为 <div /> 而不会显示。你可以试试这样的

return(
  <div className="w-3/4 flex flex-wrap">
      {apiResponse.split('').map(function(char, index){
        return <Character key={index}>{char === ' ' ? '\u00A0' : char}</Character>;
    })}
  </div>

或者您可以使用 span 而不是 div

Answer 2

如果您在元素中放置单个 space " "，则不会占用任何 space。示例：

.flex {
  display: flex;
}

<div class="flex">
  <div>a</div><div>b</div><div>c</div>
  <div> </div>
  <div>a</div><div>b</div><div>c</div>
</div>

您可以使用 \u00A0 字符（相当于   的 unicode）。您可以在 React 代码中用 \u00A0 替换所有 space 字符，如下所示：

const Character = ({ children }) => (
  <div class="character">
    { children === " " ? "\u00A0" : children }
  </div>
);

const App = () => {
  const apiResponse = "The quick brown fox jumps over the lazy dog.";
  return (
    <div className="paragraph">
      {apiResponse.split('').map((char, index) =>
        <Character key={index}>{char}</Character>
      )}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

.paragraph {
  display: flex;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

将字符传递给组件会忽略 React Js 中的空格

Passing characters to a components ignores spaces in React Js

javascript

css

reactjs

tailwind-css