Javascript React.js-有条件地使用危险的LysetinerHTML

我有一些代码来Regex一些文本并将其包装在

中，如下所示：

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() {

    const classes = classNames(
        this.props.model.get('type'),
        'character'
    );

    return (
        <span key={this.props.model.cid} className={classes} dangerouslySetInnerHTML={ {__html: this.highlightQuery()} }>
            {!this.state.hasMatch && this.highlightQuery()}
        </span>
    );
}

highlightQuery（）{
//将从模型中输出文本响应，但如果相关单词与搜索查询匹配，则还将突出显示它们
//用户输入
让输入=this.props.model.get（'value'）；
如果（！this.state.hasMatch）{
返回输入；
}
让query=this.props.matched.query，
index=this.props.model.get（'searchIndexes'）[this.props.matched.index]；
constreplacebevent=（str，start，end，what）=>{
返回str.substring（0，start）+what+str.substring（start+end）；
};
让ret=replaceThever（输入，索引，query.length，`${query}`）；
返回ret；
},
render（）{
常量类=类名(
this.props.model.get（'type'），
“性格”
);
返回(
{！this.state.hasMatch&&this.highlightQuery（）}
);
}

但是，这会产生：

未捕获错误：不变冲突：只能设置一个子项或道具。危险的LysetinerHTML。

如何最好地有条件地使用

危险的SetinenerHTML

？

在调用

render

函数之前，可以定义元素（及其属性），如下所示：

var return = {};
if(myCondition) {
    return = <span key={this.props.model.cid} className={classes}>
                {!this.state.hasMatch && this.highlightQuery()}
             </span>
} else {
    return = <span key={this.props.model.cid} className={classes} dangerouslySetInnerHTML={ {__html: this.highlightQuery()} }></span>
}

var return={}；
if（霉菌病）{
返回=
{！this.state.hasMatch&&this.highlightQuery（）}
}否则{
返回=
}

---

然后，您可以只

呈现
返回
变量，并确保span标记之间没有空格，否则会出现以下错误：

invariant.js:39未捕获不变冲突：只能设置
儿童
或
道具。危险的视黄醇HTML

return=此处没有空格或文本
如果您使用的是ES2016，则可以使用扩展语法

const options = {};
if (useHTML) {
  options.dangerouslySetInnerHTML = {__html: yourHTML};
} else {
  options.children = [<ChildNode/>];
}
return <span {...options} className="myClassName"></span>

const options={}；
如果（使用HTML）{
options.dangerouslysetinerhtml={uuuuhtml:yourHTML}；
}否则{
options.children=[]；
}
返回
对于变量，您可能希望使用比“return”更好的名称。在我的例子中，在开始标记和结束标记之间有一个换行符。它生成了以下警告
仅设置一个儿童或道具。危险的LysetinerHTML-对儿童作出反应/无危险
。如果您想调查/忽略可能出现的有关道具传播的潜在
eslint
投诉，请进行调查。
const options = {};
if (useHTML) {
  options.dangerouslySetInnerHTML = {__html: yourHTML};
} else {
  options.children = [<ChildNode/>];
}
return <span {...options} className="myClassName"></span>