javascript - 使用 ReactJS 突出显示文本

Question

我试图突出显示与查询匹配的文本，但我不知道如何让标签显示为 HTML 而不是文本。

var Component = React.createClass({
    _highlightQuery: function(name, query) {
        var regex = new RegExp("(" + query + ")", "gi");
        return name.replace(regex, "<strong>$1</strong>");
    },
    render: function() {
        var name = "Javascript";
        var query = "java"
        return (
            <div>
                <input type="checkbox" /> {this._highlightQuery(name, query)}
            </div>
        );
    }
});

当前输出:Java脚本

期望的输出:Java脚本

Answer 1

这是我简单的 twoliner 辅助方法:

getHighlightedText(text, highlight) {
    // Split text on highlight term, include term itself into parts, ignore case
    const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
    return <span>{parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? <b>{part}</b> : part)}</span>;
}

它返回一个跨度，其中请求的部分用 <b> </b> 突出显示标签。如果需要，可以简单地修改它以使用另一个标签。

更新:为避免唯一键丢失警告，这里有一个基于 span 并为匹配部分设置 fontWeight 样式的解决方案:

getHighlightedText(text, highlight) {
    // Split on highlight term and include term into parts, ignore case
    const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
    return <span> { parts.map((part, i) => 
        <span key={i} style={part.toLowerCase() === highlight.toLowerCase() ? { fontWeight: 'bold' } : {} }>
            { part }
        </span>)
    } </span>;
}