reactjs - 用跨度替换文本

Question

我正在使用 React，并尝试在包含此值的字符串中突出显示用户键入的值。

为了突出显示这个值，我试图this.props.value用包含这个值 + html 的子字符串替换对应的子字符串。

例如，对于item.name：John 如果用户键入“Jo”。我想显示Jo hn 子字符串“Jo”被突出显示。

这是我的代码：

{this.props.value.length > 0 &&
    item.name.search(this.props.value)
    ? item.name.replace(this.props.value, `<span className="myClass">${this.props.value}</span>`)
    : item.name
}

返回的值为纯文本，span 不作为 html。我怎样才能解释这个 html 标签？

标签： reactjsstringreplace

Answer 1

在这里，我不关注您的代码。

我只是告诉你如何通过反应逻辑突出显示你的文本。如果您的 item.name 有价值，那么如何突出显示文本，如果没有，那么该怎么做。

 <div>
        {item.name && <span className="myClass">${this.props.value}</span>}
        {!item.name && this.props.value}
 </div>