我一直在嘗試在標題上添加一些影片..（使用ReactJs）
我的問題是我的 Array.map() 不會從我的字串中顯示我的空格：
道具“標題”=“標題就在這里！！”
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 Right Here”，而是回傳“HeaderRightHere”
我做錯什么了嗎？
提前致謝！
uj5u.com熱心網友回復：
默認情況下，空白在跨度中折疊。您可以將 CSS 屬性white-space與該值一起使用pre，以便您的跨度保留空格。
span {
white-space: pre;
}
（您可能想也可能不想全域設定）
您可以在white-space此處找到有關該物業的更多詳細資訊：https : //css-tricks.com/almanac/properties/w/whitespace/
uj5u.com熱心網友回復：
請參考以下代碼
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;
注意：陣列中的每個元素都包裹在一個跨度中
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/321538.html