在React.js中包装HTML时，避免使用危险的setinnerhtml

Question

我有这个功能来突出显示我的组件的HTML中的某些字符:

highlightQuery() {
    // will output the text response from the Model, but also highlight relevant words if they match the search query
    // that the user input
    let input = this.props.model.get('value');
    if(!this.state.hasMatch){
        return input;
    }
    let query = this.props.matched.query,
        index = this.props.model.get('searchIndexes')[this.props.matched.index];
    const replaceBetween = (str, start, end, what) => {
        return str.substring(0, start) + what + str.substring(start + end);
    };
    let ret = replaceBetween(input, index, query.length, `<span class='highlighted'>${query}</span>`);
    return ret;
},
render() {
    return (
        <span dangerouslySetInnerHTML={ {__html: this.highlightQuery()} }></span>
    );
}

因此，正如您所看到的，如果在该组件的value中没有匹配，那么只需返回input内容，否则，将匹配的文本包装在<span />中。

我所追求的是避免使用dangerouslySetInnerHTML。这可能吗?

Answer 1

我不确定这将完美地回答你的问题，但我会这样做，以避免危险的setinnerhtml。

render() {
      highlightQuery() {
        let input = this.props.model.get('value');
        if(!this.state.hasMatch){
            return input;
        }
        let query = this.props.matched.query,
            index = this.props.model.get('searchIndexes')[this.props.matched.index];
        const replaceBetween = (str, start, end, what) => {
        return str.substring(0, start) + what + str.substring(start + end);
        };
        let ret = replaceBetween(input, index, query.length, `<span class='highlighted'>${query}</span>`);
        return ret;
    }
    var mycontent = highlightQuery();
    return (
        <span> {mycontent} </span>
    );
}

希望能有所帮助

编辑:我想我现在明白你的意思了，但在我看来，它不会改变策略，你在渲染中工作，选择你的内容并渲染它。(也许我还是不明白…div = p)

是否有任何原因highlightQuery不能返回一个react元素?

highlightQuery(input,query, index) {
    // will output the text response from the Model, but also highlight relevant words if they match the search query
    // that the user input
    var before = input.substring(0, index);
    var after  = input.substring(index + query.length);
    return <span>{before}<span class='highlighted'>{query}</span>{after}</span>;
},
render() {
    var input = this.props.model.get('value');
    var query = this.props.matched.query;
    var index = this.props.model.get('searchIndexes')[this.props.matched.index];
    if(!this.state.hasMatch){
        return <span>{input}</span>;
    } else {
        return highlightQuery(input, query, index);
    }
}