Question

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

我无法弄清楚如何在创建/更新列表时添加DOM节点。以下代码是我到达的地方。我想我明白为什么它不起作用（我继续得到Stephine Ma [对象] ks＆＃39;作为输出）。我很确定我需要使用.HTMl或.innerHTML将其添加为实际的DOM节点，但是我不确定如何做到这一点。

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>
        );
    }
}

Answer 1

以下是一个示例，如果您可以使用indexOf而不是正则表达式匹配。构建所有节点并将其包装在跨度中。

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>
        );
    }
});

你可以做反应中的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>
);

Answer 2

我最近正在研究类似的东西，我为它创建了一个库（prelude-extension）和一个组件（react-selectize），这里是demo，也许它是你在找什么。

反应搜索高亮

2 个答案: