将 HTML 标记插入替换函数

Question

我想用粗体 html 标签包装Aufpreis以突出显示这一点，但如果我插入 html，它会将它们视为字符串的一部分，如何插入 html 标签？

数据

[item_1, item_2, item_3, item_4]

应用.js

const Items = getItems(state).map((item) => {
return {
label: `${item.alias.replace('item', '')}(<b>Aufpreis</b>: ${item.value}euro)`,
value: item.alias
};
});

const App = ({Items}) => (
{Items}
)

Answer 1

可以将 JSX 分配给对象属性，而不是分配字符串。

需要有一个分组标签，围绕你的元素。如果您不想使用div则可以使用Fragment标记(React.Fragment(并将您需要执行的任何代码评估包装在{}之间。

label: <React.Fragment>{item.alias.replace('item', '')}<b>Aufpreis</b>:({item.value}euro)</React.Fragment>

或

label: <div>{item.alias.replace('item', '')}<b>Aufpreis</b>:({item.value}euro)</div>