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

Question

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

如何将此代码插入到我的 React 组件中？（注意我不想使用 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 的情况下将 HTML/script 片段嵌入到 react.js 页面中？

How to embed an HTML/script snippet into a react.js page without jQuery?

embed

reactjs