无法加载index.html中的react组件

时间:2019-09-15 16:54:30

标签: javascript reactjs

我正在创建一个静态React应用(没有服务器),而且像一个投资组合网站。我被困在将React组件从外部Js文件加载到另一个组件中的时候。但是我在浏览器控制台中遇到以下错误:

  

ReferenceError:未定义require

     

许多人建议使用create-react-app创建react应用,但是   在节点服务器localhost:上运行,实际上我需要将其部署在   apache服务器,建议我现在该怎么办?

我的文件夹结构:

enter image description here

App.js

import Header from './js/Header.js';
class App extends React.Component
{
    render(){
        return (
                <Header/>
            );
    }
}
ReactDOM.render(
    <App/>,
    document.getElementById("root")
);

Header.js

class Header extends React.Component
{
    render(){
        return (
            <div>This is Naveen!!</div>
        );
    }
}
export default Header;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
        <!--Let browser know website is optimized for mobile-->
        <!--Import React Js minified js-->
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <!--Import React Js DOM minified js-->
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <!--Import Babel Js-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
        <!--Import external CSS-->
        <link rel="stylesheet" href="main.css"/> 
	    <style>
	    </style>
    </head>
	<body>
        <!--Root component of the app-->
        <div id="root"></div>
        <!--Import Jquery for materialize css-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <!--Import Application js files-->
        <script type="text/babel" src="js/App.js"></script>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

因为Inp = 'abbc' Lis =['b','c'] Output = bbc string = "abbc" pattern = ['b','c'] new =[] counter = 0 while True: if counter <= len (pattern)-1: find = re.findall(pattern[counter], string) counter += 1 new.extend(find) continue else: break print(new) #this will return ['b','b','c'] 是全局的,所以您不需要importReact无效。

ReactDOM
import