Question

我想从我的ReactJS应用程序生成一个嵌入式代码。我真的不知道如何实现这种功能？

例如，我想生成一个代码，该代码可以使用iframe在另一个网站中使用，就像youtube嵌入式代码一样。

谢谢。

Answer 1

您可以按照以下步骤进行操作。

1。添加DOM元素容器以包含您的组件

<!-- ... Your HTML code ... -->

<div id="example_container"></div>

<!-- ...Your HTML code ... -->

div 标签将帮助我们从脚本代码中找出该元素，以在其中呈现所需的反应代码。 2.添加您的react脚本。请确保在脚本之前加载react。

<!-- Load react scripts -->
<!-- Load our React component. -->
  <script src="example.js"></script>

3。在example.js中具有ExampleReactClass的代码扩展了React.Component和const e = React.createElement;之后，添加以下行以修复您提到的<div>中的代码

const domContainer = document.querySelector('#example_container');
ReactDOM.render(e(ExampleReactClass), domContainer);

希望它能工作！

Answer 2

由于该问题具有YouTube的示例，因此从此开始。

<iframe width="560" height="315" src="https://www.yoursite.com/embed/h04NnnUApaM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

我们主要关注的是src属性，如果需要，可以考虑其余iframe属性。

为了使事情变得简单，我们需要让Router处理来自iframe的嵌入网址请求

import { BrowserRouter } from 'react-router-dom'

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

添加处理/embed/h04NnnUApaM的路线

<Route path='/embed/:id' component={YourComponent}/>

像这样YourComponent一样获取props.match.params.number中的嵌入ID

渲染组件，它应该显示在iframe中。

生成嵌入代码

取决于您要嵌入的内容。

<textarea>{this.state.embedCode}<textarea>

embedCode类似于上面的示例（id取决于您需要从嵌入页面呈现组件的内容）

<iframe width="560" height="315" src="https://www.yoursite.com/embed/h04NnnUApaM"></iframe>

如何在ReactJS中生成嵌入式代码？

2 个答案: