Question

我使用create-react-app创建了一个react网站。在其中一个页面中，我想嵌入一个airbnb预览，请参阅下面的代码和airbnb提供的截图。

如何将此代码插入我的React组件？（NB我不想使用jQuery）

<div
  class="airbnb-embed-frame"
  data-id="21917882"
  data-view="home"
  data-hide-price="true"
  style="width:450px;height:300px;margin:auto"
>
  <a href="https://www.airbnb.com/rooms/21917882?s=51">
    <span>View On Airbnb</span>
  </a>
  <a 
    href="https://www.airbnb.com/rooms/21917882?s=51" 
    rel="nofollow"
    >T2 hypercentre Capitole/St-Sernin, quiet &amp; bright
  </a>
  <script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk" />
</div>;

The component created by this code, which I want to embed in the react page

Answer 1

这确实违反了React原则，但您可以使用类似react-async-script-loader（或自定义解决方案）的内容加载嵌入脚本，然后在渲染时或组件安装时调用提供的AirbnbAPI.bootstrap()函数

<强> Live Example

import React, { Component } from "react";
import scriptLoader from "react-async-script-loader";

const Preview = ({ isScriptLoaded, isScriptLoadSucceed }) => {
  if (isScriptLoaded && isScriptLoadSucceed) {
    window.AirbnbAPI.bootstrap();
  }

  return (
    <div
      className="airbnb-embed-frame"
      data-id="21917882"
      data-view="home"
      data-hide-price="true"
      style={{ width: 450, height: 300, margin: "auto" }}
    >
      <a href="https://www.airbnb.com/rooms/21917882?s=51">
        <span>View On Airbnb</span>
      </a>
      <a href="https://www.airbnb.com/rooms/21917882?s=51" rel="nofollow">
        T2 hypercentre Capitole/St-Sernin, quiet &amp; bright
      </a>
    </div>
  );
};

export default scriptLoader(["https://www.airbnb.com/embeddable/airbnb_jssdk"])(
  Preview
);

如何在没有jQuery的情况下将airbnb html / script片段嵌入到react.js页面中？

1 个答案: