从字符串数组中，使用组件以不同的样式呈现字符串数组的某些索引

Question

我不知道在不写文章的情况下如何有效地表达这个问题。

我有这个组件接受3个道具，titleArr,title和boldIndexes。

基本概念是在一些呈现上述组件的组件中，将创建一个字符串数组。然后，该数组中的某些索引将作为boldIndexesprop传递。titleprop是字符串的初始数组，转换为字符串。

一个例子是:

const personal = 5;
const friends = 1;
const titleArr = [
'You currently have ',
// this item will be bold
personal > 0 ? `${personal} saved item${personal > 1 ? 's' : ''} ` : null,
friends > 0 ? `${personal > 0 ? 'and ' : ''}` : '. ',
// this item will be bold
friends > 0 ? `${friends} item${friends > 1 ? 's' : ''} ` : null,
friends > 0 ? 'saved by your friends.' : null,
];
const boldIndexes = [titleArr[1], titleArr[3]];
const title = titleArr.join('');

在上面的例子中

titleArr

[
'You currently have ',
'5 saved items',
'and ',
'1 item',
'saved by your friends.',
]

boldIndexes

[
'5 saved items',
'1 item',
]

标题

'You currently have 5 saved items and 1 item saved by your friends.',

在我的组件中，我想要像下面这样的内容;

<StyledComponentTitle>
You currently have 
<StyledComponentBoldTitle>5 saved items</StyledComponentBoldTitle> 
and 
<StyledComponentBoldTitle>1 item</StyledComponentBoldTitle> 
saved by your friends.
</StyledComponentTitle>

或

<StyledComponentTitle>
You currently have 
</StyledComponentTitle>
<StyledComponentBoldTitle>
5 saved items
</StyledComponentBoldTitle> 
<StyledComponentTitle>
and 
</StyledComponentTitle>
<StyledComponentBoldTitle>
1 item
</StyledComponentBoldTitle> 
<StyledComponentTitle>
saved by your friends.
</StyledComponentTitle>

这是否可以不执行dangerouslySetInnerHTML

Answer 1

您可以映射数组并返回带有if的样式部分，以便您知道是否需要将其加粗。

titleArr.map((el, index) => {
if (index == 1 || index == 3) {
return "<StyledComponentBoldTitle>" + el + "</StyledComponentBoldTitle>"
} else {
return el;
}
});

Answer 2

希望这能回答你的问题。

在映射数组时，测试当前索引是否包含在粗体索引数组中，如果包含，则向span添加className(我使用span，因为它具有本机块显示)。

export const App2 = () => {
const personal = 5;
const friends = 1;
const titleArr = [
"You currently have ",
// this item will be bold
personal > 0 ? `${personal} saved item${personal > 1 ? "s" : ""} ` : null,
friends > 0 ? `${personal > 0 ? "and " : ""}` : ". ",
// this item will be bold
friends > 0 ? `${friends} item${friends > 1 ? "s" : ""} ` : null,
friends > 0 ? "saved by your friends." : null
];
const boldIndices = [1, 3];
return (
<>
{titleArr.map((text, idx) => {
const cls = boldIndices.includes(idx) ? "bold" : "";
// inside your stylesheet: .bold {font-weight: bolder}
return (
<span key={text} className={cls}>
{text}
</span>
);
})}
</>
);
};