javascript - 危险地 react SetInnerHtml 在某些条件下不起作用

Question

我正在使用 dangerouslySetInnerHtml 将链接插入复合 react 组件。 render 方法调用方法 rowValue 检查组件的状态并返回要呈现的适当标记。

这是 rowValue 方法:

rowValue: function() {
    var fieldValue;

    if(!this.state.isBeingEdited) {
        fieldValue = (
            <div dangerouslySetInnerHtml={{ __html: this.props.value }} />
        );
    } else {
        fieldValue = (
            <div className="col-sm-6 col-xs-6 js-field-wrapper">
                <input type="text"
                       defaultValue={this.extractUrl(this.props.value)}
                       className="form-control" />
            </div>
        );
    }

    return fieldValue;
},

在初始渲染时，div 的内容为空:

<div class="col-sm-6 col-xs-6" data-reactid=".1.1.0.0.0.1.0.0.2.1:$angellist.0.1"></div>

但是当组件的 edit 状态设置为 true 时，输入会正确填充正确的值:

<div class="col-sm-6 col-xs-6 js-field-wrapper" data-reactid=".1.1.0.0.0.1.0.0.2.1:$angellist.0.1">
    <input type="text" class="form-control" value="https://example.com" data-reactid=".1.1.0.0.0.1.0.0.2.1:$angellist.0.1.0">
</div>

将 edit 状态设置回 false 会呈现空的 div。

用 dangerouslySetInnerHtml 属性将 div 包裹在另一个 div 中不会改变任何东西。

Answer 1

我无法弄清楚发生这种情况的确切条件，但我找到了解决方法。对于 posterity's sake这是:

我想用特定链接填充 div。我没有传递带有要通过 dangerouslySetInnerHtml 设置的 anchor 标记的字符串，而是传递了 URL 并设置了 anchor 标记的 href 属性。

  fieldValue = (
      <div className="col-sm-6 col-xs-6">
         <a href="{this.props.url}">{this.props.url}</a>
      </div>
    );