时间戳

首页 > 解决方案 > 如何使用 react 链接/引用 html 文件中的多个脚本（没有 NODE.js）？

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

问题描述

我正在使用没有 node.js 的 react.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/react@16.0.0/umd/react.production.min.js"></script>
    <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
    <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/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>

而且我想将脚本文件（文本/ babel）分离到一个单独的文件并将其链接到 html，但是尽管 VS Code 没有显示任何错误，但这不起作用，我不知道该怎么做，我可以' t 使用 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

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

标签： javascriptreactjs

解决方案

您需要在文件中输入正确的js文件相对路径index.html：

<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/react@16.0.0/umd/react.production.min.js"></script>
    <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/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

推荐阅读