反应搜索高亮

React search highlighing

本文关键字：高亮 搜索      更新时间：2023-09-26

我正在尝试进行搜索，突出显示显示列表中匹配的字符。

我有麻烦弄清楚如何在列表中添加DOM节点，因为它正在创建/更新。下面的代码是我得到的。我想我明白为什么它不起作用(我一直得到'Stephine Ma[object object]ks'作为输出)。我很确定我需要添加它作为一个实际的DOM节点使用。html或。innerhtml，但与反应我不知道如何做到这一点。

import React from 'react';
import { Router, Route, Link } from 'react-router';
export default class extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        var divImage = {
            backgroundImage : "url(" + this.props.image + ")"
        };
        var test = this.props.name;
        if(this.props.name.indexOf(this.props.filterText) != -1 ) {
            var pattern = this.props.filterText.toString();
            test = test.replace(pattern, <span className="highlight">+pattern+</span>)
        }
        return (
            <li className="panelItem">
                <a className="item-title" style={divImage}>{test}</a>
            </li>
        );
    }
}

这里是一个例子，如果你可以使用indexOf而不是正则表达式匹配。构建所有节点并将它们封装在span中。

https://jsfiddle.net/2zx84koy/

var Hello = React.createClass({
    render: function() {
        var name = this.props.name;
        var startIdx = name.indexOf(this.props.filterText);
        var textNodes = <span>{name}</span>
        if(startIdx > -1 ) {
          textNodes = (
            <span>
                {name.substring(0, startIdx)}
                <span className="highlight">{name.substring(startIdx, startIdx + this.props.filterText.length)}</span>
                {name.substring(startIdx + this.props.filterText.length)}
            </span>
          )
        }

        return (
            <li className="panelItem">
                <a className="item-title">{textNodes}</a>
            </li>
        );
    }
});

你可以在react中做innerHTML，但通常不建议这样做，除非你确定它不会让你容易受到xss攻击。我在下面放了一个如何将代码转换为这种风格的示例，仅供参考。

var test = this.props.name;
if(this.props.name.indexOf(this.props.filterText) != -1 ) {
    var pattern = this.props.filterText.toString();
    test = test.replace(pattern, '<span class="highlight">' + pattern + '</span>')
}

return (
    <li className="panelItem">
        <a className="item-title" dangerouslySetInnerHTML={{__html: test}}></a>
    </li>
);

我最近在做类似的事情，我为它创建了一个库(prelude-extension)和一个组件(react-selectize)，这里是一个演示，也许它是你正在寻找的

相关文章：