Question

我有一个简单的jquery ajax，用于从API中获取内联HTML代码

$.ajax({
  url:      url,
  headers:  { 'Accept': 'application/javascript' },
  dataType: 'html',
  beforeSend: function(){
    $('.load-more').slideDownThenFadeIn(100);
  }
})
.done(function(data) {
  $('#container').append(data);
});

这是一个不是用React构建的简单按钮

<a class="btn load-more" href="javascript:void(0)">Load More</a>

Ajax调用调用API将html代码呈现回服务器......

它渲染回下面的html代码

<div data-react-class=\"My.React.Base.PostButton\" data-react-props=\"{&quot;buttonText&quot;:&quot;Contact me&quot;,&quot;buttonClass&quot;:&quot;btn btn-clear btn-block&quot;,&quot;business&quot;:{&quot;id&quot;:86055,&quot;business_name&quot;:&quot;Buy Plan&quot;,&quot;mobile_phone&quot;:&quot;0412 345 678&quot;},&quot;cta&quot;:&quot;card&quot;,&quot;slideTitle&quot;:null,&quot;showPostJobExclusively&quot;:true,&quot;showToAll&quot;:false,&quot;CallCustomer&quot;:false}\"></div>

但反应成分没有呈现......

我实际上期望渲染react组件，但是在附加ajax数据之后会丢失以下内容

<a data-reactroot="" class="btn btn-clear btn-block" href="#"><span><!-- react-text: 3 -->Contact me<!-- /react-text --></span></a>

我在这里错过了什么吗？

编辑：

<div class="card"><div class="col-xs-6 pr8"><div data-react-class="SS.React.Base.ProfileJobPostButton" data-react-props="{&quot;buttonText&quot;:&quot;Contact me&quot;,&quot;buttonClass&quot;:&quot;btn btn-clear btn-block&quot;,&quot;business&quot;:{&quot;id&quot;:129679,&quot;business_name&quot;:&quot;IMC Cleaning Services&quot;,&quot;mobile_phone&quot;:&quot;6197877882&quot;},&quot;cta&quot;:&quot;business_directory_card&quot;,&quot;slideTitle&quot;:null,&quot;showPostJobExclusively&quot;:true,&quot;showPostJobToAll&quot;:false,&quot;showCallBusiness&quot;:false}"></div></div>

来自API的React组件如下所示

render() {
  return(
    <a className={this.props.buttonClass} href="#" onClick={this.handleOnClick}>
      {
        this.state.loading ?
          <My.React.Base.Spinner spinnerColour='white-spinner' />
        :
        <span>
          {this.props.buttonText}
          {this.props.withArrow && <i className="ficon-arrow-right-shaft pl10" />}
        </span>
      }
    </a>
  )
}

Answer 1

您使用的是错误的方法。首先，你不应该在反应组件中强制渲染html代码。所以通常API应该返回数据，而html应该是react组件的一部分。

但无论如何，如果你使用这种方法，你应该使用 dangerouslySetInnerHtml 属性的反应参考链接https://facebook.github.io/react/docs/dom-elements.html

这就是修改dom或将html附加到dom节点的反应方式＆＃39; HTML

您也可以在安装组件后修改组件。因此，如果您在组件安装后进行API调用（通常是这种情况），则可以将html存储在状态中，并使用上述属性dangerouslySetInnerHTML，您可以将其值设置为状态变量。

在Jquery Ajax调用之后，React Component将不会呈现

1 个答案: