程序员经验分享-hwhale

如何使用react（没有NODE.js）链接/引用html文件中的多个脚本？

2024-03-10

我正在使用react.js而不使用node.js，并且我想在我的html文件中链接多个脚本文件，但我不能。

基本上，这是我的代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" type="image/png" href="src/reactFavicon.png">
    <link href="https://fonts.googleapis.com/css?family=Ma+Shan+Zheng|Righteous&display=swap" rel="stylesheet">
    <title>Users</title>
    <script type="application/javascript" src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/umd/react.production.min.js"></script>
    <script type="application/javascript" src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/umd/react-dom.production.min.js"></script>
    <script type="application/javascript" src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/babel.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const rootElement = document.getElementById('root')

        class Users extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    items:[],
                    isLoaded: false
                }
            }

            componentDidMount() {
                fetch('https://jsonplaceholder.typicode.com/users')
                .then(res => res.json())
                .then(json => {
                    this.setState({
                    isLoaded: true,
                    items: json
                })
                })
            }

            render() {
                const title = this.props.title;
                var {isLoaded, items} = this.state;
                if(!isLoaded) {
                    return <div>Loading...</div>
                } else {
                    return(
                        <div class="Users">
                            {title}
                            <ul>
                                {items.map(item => (
                                    <li key={item.id}>
                                        {item.name} | {item.email} ||| lives in {item.address.street}, {item.address.suite} ({item.address.city}), his/her phone number is {item.phone} and works in <strong>{item.company.name}</strong>.
                                    </li>
                                )) }
                            </ul>
                        </div>
                    )
                }
            }
        }



        function App() {
            return (
                <div>
                <Users 
                    title = "Users"
                />
                </div>
            )
        }

        ReactDOM.render(
            <App />,
            rootElement
        )
    </script>
</body>
</html>

我想将脚本文件（text/babel）分离到一个单独的文件并将其链接到 html，但这不起作用，尽管 VS Code 没有显示任何错误，我不知道该怎么办，我可以'不使用 Node（他们在我的工作中不使用它，我无能为力）。

这是不起作用的代码：

<body>
    <div id="root"></div>
    <script type="text/babel" src="users.js"></script>
<body>

您还可以使用此示例：

https://dev.to/luispa/lets-try-react-without-nodejs-3a7 https://dev.to/luispa/lets-try-react-without-nodejs-3a7

就像这样，但是脚本在 html 文件中分离并链接/引用，请帮助我......


您需要输入正确的相对路径到js文件中index.html file:

<body>
    <div id="root"></div>
    <script type="text/babel" src="./path/to/users.js"></script>
<body>

顺便说一句，我建议编译 babel 代码，这样就不必在客户端上进行转译（对于每个用户）。更好的是，只需使用 webpack 创建不同的编译包即可。

这是一些编译和缩小的 JS（babel 到 es5 JS）的工作示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Ma+Shan+Zheng|Righteous&display=swap" rel="stylesheet">
    <title>Users</title>
    <script type="application/javascript" src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/umd/react.production.min.js"></script>
    <script type="application/javascript" src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/umd/react-dom.production.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="application/javascript">
        "use strict";function _instanceof(e,t){return null!=t&&"undefined"!=typeof Symbol&&t[Symbol.hasInstance]?!!t[Symbol.hasInstance](e):e instanceof t}function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,t){if(!_instanceof(e,t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function _createClass(e,t,n){return t&&_defineProperties(e.prototype,t),n&&_defineProperties(e,n),e}function _possibleConstructorReturn(e,t){return!t||"object"!==_typeof(t)&&"function"!=typeof t?_assertThisInitialized(e):t}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_setPrototypeOf(e,t)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var App=function(e){function t(){var e,n;_classCallCheck(this,t);for(var r=arguments.length,o=new Array(r),i=0;i<r;i++)o[i]=arguments[i];return _defineProperty(_assertThisInitialized(n=_possibleConstructorReturn(this,(e=_getPrototypeOf(t)).call.apply(e,[this].concat(o)))),"state",{items:[],isLoaded:!1}),_defineProperty(_assertThisInitialized(n),"render",function(){return n.state.isLoaded?React.createElement("div",{style:{textAlign:"left",padding:20}},React.createElement("h1",{style:{textAlign:"center"}},"Users"),React.createElement("ul",null,n.state.items.map(function(e){return React.createElement("li",{key:e.id},e.name," | ",e.email," ||| lives in ",e.address.street,","," ",e.address.suite," (",e.address.city,"), his/her phone number is ",e.phone," and works in ",React.createElement("strong",null,e.company.name),".")}))):React.createElement("div",{style:{textAlign:"center"}},"Loading...")}),n}return _inherits(t,React.Component),_createClass(t,[{key:"componentDidMount",value:function(){var e=this;fetch("https://jsonplaceholder.typicode.com/users").then(function(e){return e.json()}).then(function(t){e.setState({isLoaded:!0,items:t})})}}]),t}();ReactDOM.render(React.createElement(App,null),document.getElementById("root"));
    </script>
</body>
</html>

工作独立仓库:

https://github.com/mattcarlotta/standalone-example https://github.com/mattcarlotta/standalone-example

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

ReactJS

如何使用react（没有NODE.js）链接/引用html文件中的多个脚本？ 的相关文章

  • 如何从 javascript 错误对象读取错误消息

    有人可以帮我解决以下问题吗 我正在通过 redux 操作进行后调用 如下所示 export const addEmployee firstName surname contactNumber email gt async dispatch

  • 多次训练brain.js？

    在第一次训练后 如何将新信息 仅新信息 而不是所有信息 因为这会花费太多性能 训练到我的用 Brain js 制作的神经网络 它有点粗糙 但您可以使用以下结构来实现 如果我们加入 2 个训练数据集 旧数据集与新数据集 然后重新训练keepN

  • 在 Cordova 中合并文件的多个部分

    在我的 Cordova 应用程序中 我正在下载任意文件 例如图像或视频文件 这是通过 Cordova 文件传输插件和 Range 标头完成的 因为我需要分段下载文件 我的问题是 我想将几 个小 字节 文件合并回原来的文件中 他们曾经在其中使

  • 由于 MIME 类型而导致资源被阻止？

    多年来我已经成功地包含动态创建的 javascript 文件 这是一个例子 https granadainfo com sups php locs 95 https granadainfo com sups php locs 95 正如你所

  • 个人 Tumblr 帖子上的 Javascript

    我知道您可以编辑在 tumblr 博客上呈现所有帖子博客主页的 html AngularJS 但是 有什么办法可以添加自定义到各个帖子 我想在逐个帖子的基础上做一些 javascript 的东西 但似乎无法找到可以编辑代码的位置 或者 如果

  • 如何用 JavaScript 修复图像透视变形和旋转？

    我有一些用手机拍摄的图像 有没有可以拉直纸张照片并将其压平的 JavaScript 库 例如 我想创建一个矩形图像 该图像没有任何失真 换句话说我想知道如何用 JavaScript 修复透视变形和旋转 例如 我发现下面的示例图像来自this

  • setTimeout范围问题

    我在控制玩家重生的函数内部定义了一个 setTimeout 我正在创建一个游戏 var player death function this alive false Console log death var timer3 setTimeo

  • 如何将本地文本文件上传到文本区域（网页内）

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一

  • 对使用“new”创建的数组上“map”的行为感到困惑[重复]

    这个问题在这里已经有答案了 我对结果感到困惑mapping 使用创建的数组new function returnsFourteen return 14 var a new Array 4 gt undefined x 4 in Chrome

  • 我应该如何实现将状态保存到 localStorage？

    CODE var React require react var Recipe require Recipe jsx var AddRecipe require AddRecipe jsx var EditRecipe require Ed

  • 使用 Javascript/Node.js 在代码内执行 mongoimport

    node js javascript 中是否有任何库可供个人使用mongoimport在代码中 据我了解 mongoimport 有点像 exe 您必须先执行它 然后才能使用其文本输入环境 是否可以在我的代码中执行 mongoimport

  • 使用 JavaScript 防止网页导航离开

    如何使用 JavaScript 防止网页导航离开 Using onunload允许您显示消息 但不会中断导航 因为为时已晚 然而 使用onbeforeunload将中断导航 window onbeforeunload function re

  • Javascript location.href 到 mailto 触发 GET HTTP，该 HTTP 在 Chrome 中被取消

    我有一个按钮可以触发以下 javascript 函数 function sendEmail var mail mailto email protected cdn cgi l email protection location href m

  • ES6 静态方法引用 self？ [复制]

    这个问题在这里已经有答案了 我有两节课 存储库和用户存储库 我想在 Repository 中定义一个静态方法 该方法在运行时调用 UserRepository 中的静态函数 有什么干净的方法可以做到这一点吗 class Repository

  • 为什么我的 D3 SVG 图上的轴不会更新？

    I have 简单的 D3 散点图 http www raxacoricofallapatorius com test scattertest html我在显示数据的几个不同属性之间切换 但是虽然我可以更改数据点 并按照我想要的方式进行转换

  • Javascript等待/异步执行顺序

    所以我试图把我的头脑集中在 Promise await async 上 我不明白为什么当 go 执行时 带有 finished 的警报会紧随 console log coffee 之后 当所有函数都使用等待 承诺时 为什么它只等待 getC

  • 从请求url获取hash参数

    我有这样的网址 http www coolsite com daily plan id 1 http www coolsite com daily plan id 1解析该字符串并读取哈希值 id 之后的值 的最简单方法是什么 谢谢 在客户

  • 如何使用 Javascript OAuth 库不暴露您的密钥？

    看着Twitter OAuth 库 https dev twitter com docs twitter libraries 我看到了这个注释 将 JavaScript 与 OAuth 结合使用时要小心 不要暴露你的钥匙 然后 看着jsOA

  • ‘state’未定义 no-undef

    我使用教程来学习 React 但我很快就陷入困境 在教程中 他们使用以下代码 import React Component from react class Counter extends Component state count 0 r

  • VS Code 扩展 - 获取完整路径

    我正在为 VS Code 编写一个插件 我需要知道调用扩展的文件的路径 无论是从编辑器上下文菜单或资源管理器上下文菜单调用还是用户只需键入扩展命令 function activate context get full path of the

随机推荐

热门标签