个人中心
gpt4 book ai didi

javascript - 如何在react.js中使用iframe

转载 作者：行者123 更新时间：2023-11-28 12:59:13 28 4
gpt4 key购买 nike

我如何使用 iframe 要求来自 public/的 html？

我的代码是这样的:

import React, {Component} from 'react';
import Iframe from './IframeComm';

class App extends Component {
    render() {
        return (
            <div className="App">
                <h1>react</h1>
                <Iframe
                    attributes={
                        {
                            src: '/test/test.html',
                            style: {
                                border: '10px solid red'
                            },
                        }
                    }
                />
            </div>
        );
    }
}

export default App;

测试.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    iframe
</body>
</html>

当我使用npm start时，一切都很好

enter image description here

但是当我使用npm run build

enter image description here

目录:

enter image description here

我该如何解决这个问题？谢谢。

最佳答案

您可以简单地创建一个新组件，该组件获取源代码并使用 Iframe 返回；

iframe.js

import React from 'react';

const Iframe = ({ source }) => {

    if (!source) {
        return <div>Loading...</div>;
    }

    const src = source;     
    return (
        // basic bootstrap classes. you can change with yours.
        <div className="col-md-12">
            <div className="emdeb-responsive">
                <iframe src={src}></iframe>
            </div>
        </div>
    );
};

export default Iframe;

然后您可以简单地调用该组件，例如；

import React, {Component} from 'react';
import Iframe from './components/iframe.js';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            src: '/test/test.html'
        };
    }

    render() {
        return (
            <div className="App">
                <h1>react</h1>
                <Iframe source={this.state.src} />
            </div>
        );
    }
}

export default App;

关于javascript - 如何在react.js中使用iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52324664/

28 4 0
文章推荐： ios - 如何使用 Sprite Kit 制作具有 3D 效果的戒指？
文章推荐： javascript - 修改jQuery插件: Treeview script to expand and collapse function -> exclude area
文章推荐： Swift 2.0/Parse - 查询完成速度不够快，因此应用程序在启动时崩溃
文章推荐： ios - 如何让 NSURLConnection.sendAsynchronousRequest 在 UITableView 初始化之前执行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com