javascript 为什么我的React代码不工作，虽然其他东西是好的

kb5ga3dv 于 2022-12-28 发布在 Java

关注(0)|答案(1)|浏览(117)

我第一次决定做react项目，注意到它不工作，css很好，但不是react代码，检查了很多教程，但还没有找到任何解决方案：（
这是我第一次使用react，所以很抱歉，伙计们，谢谢你们的反馈
index.html:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="restaurant"></div>

    <script src="js.js" type="text/babel"></script>
</body>
</html>

js.js:

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

ReactDOM.render(<App />, document.getElementById("restaurant"))
ReactDOM.render(<h1>hiii</h1>, document.getElementById("restaurant"))

App.js:

import React from "react"
import Header from 'header'

export default function App() {
    return(
        <Header />
    )
}

标题. js：

import React from 'react'

export default function Header(){
    return (
        <div className='container'>
            <div className='head-part'>

                <h1>HopeLake</h1>
                <div className='icons'>
                    <span>i1</span>
                    <span>i2</span>
                    <span>i3</span>
                </div>
                <div className='list-pages'>
                    <ul>
                        <li>HOME</li>
                        <li>ABOUT</li>
                        <li>MENU</li>
                        <li>ORDER</li>
                        <li>CONTACT</li>
                    </ul>
                </div>

            </div>
        </div>
    )
}

JavaScript

来源：https://stackoverflow.com/questions/74932935/why-my-react-code-not-working-although-other-stuff-is-okay

1条答案

按热度按时间

whlutmcx1#

下面是我通过CDN使用React.JS的示例。不需要导出默认值，但需要导入index.html中的文件
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    </head>
    <body>
        <div id="root"></div>

        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        
        <!-- Import new component before use here!!! -->
        <script type="text/babel" src="./App.js"></script>
        <script type="text/babel" src="./Header.js"></script>
        <script type="text/babel" src="./index.js"></script>
    </body>
</html>

App.js

const App = () => {
    return <Header/>
}

Header.js

const Header = () => {
    return <div>This is my header</div>
}

index.js

const container = document.querySelector("#root");
const root = ReactDOM.createRoot(container);
root.render(<App />);

希望这对你有帮助...

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 为什么我的React代码不工作，虽然其他东西是好的

1条答案

相关问题

热门标签

最新问答