映射字符串的每个字符时没有空格（ReactJS）

Question

我一直在尝试在标题上添加一些动画..（使用 ReactJs）

我遇到的问题是我的 Array.map() 不会显示我的字符串中的空格：

道具 'title' = “Header 就在这里！！”

const TitleAnimation = ({title}) => {
    const titleArray = title.split("");
    console.log(titleArray);
    // logs all characters in an array, including spaces

    return (
        <Wrapper className="text-6xl">
            {titleArray.map((character, index) => {
                return (
                    <span key={index}>{character}</span>
                )
            })}
        </Wrapper>
    );
}

不是让多个跨度返回“Header就在这里”，而是returns“Header就在这里”

我是不是做错了什么？

提前致谢！

Answer 1

空格在跨度中默认折叠。您可以将 CSS 属性 white-space 与值 pre 一起使用，以便您的 span 保留空格。

span {
  white-space: pre;
}

（您可能想要也可能不想全局设置）

您可以在此处找到有关 white-space 属性的更多详细信息：https://css-tricks.com/almanac/properties/w/whitespace/

Answer 2

请参考以下代码

import React from 'react';

const App = () => {
  const title = 'Header Right Here!!';
  const titleArray = title.split(' ');
  const renderTitle = () => {
    return titleArray.map((title, index) => {
      return (
        <span>
          {title}
          {` `}
        </span>
      );
    });
  };
  return <div>{renderTitle()}</div>;
};
export default App;

注意：数组中的每个元素都包含在一个跨度中

映射字符串的每个字符时没有空格（ReactJS）

No spaces when mapping every character of a string (ReactJS)

arrays

mapping

split

reactjs