javascript - 導出默認/導入不起作用

Question

這是我的代碼：為什么這不起作用？ 該代碼假設在 html 文件中顯示h1 ，但由於某種原因，它對我沒有這樣做。

元素.js：

import React from "react"
function Element() {
    return (
        <div>
            <h1>Hello World</h1>
        </div>
    )
}
export default Element

應用程序.js：

import React from 'react'
import ReactDOM from 'react-dom'
import Element from './Element.js'

ReactDOM.render(<Element />, document.getElementById('root'))

html 代碼：

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

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

我在 stackoverflow 上查看了許多解決方案，但這個錯誤仍然無法正常工作。 我在兩個文件中都添加了import React from "react"和import ReactDOM from "react-dom"但還是一樣的： return語句中的任何內容都沒有出現，我已經掙扎了好幾個小時。 我的代碼有什么問題？

Answer 1

這里似乎存在三個問題。 使用提供的代碼，這就是我得到的。

1. 正如@TJ Crowder 在評論中提到的那樣，腳本的type屬性需要更改。 您也可以完全刪除它。
2. 據我所知，最新的 ReactDOM package 沒有render方法。 你必須適合創建一個根，然后像這樣渲染應用程序

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Element />);

3. 在root div 元素之后包含腳本，因為執行時的腳本可能不知道id為 root 的元素。

Answer 2

我會重新做 app.js 到

 import Element from './test' function App() { return ( <div className='App'> <Element /> </div> ) } export default App

PS。 also some links to the official documentation and how to use react https://reactjs.org/docs/create-a-new-react-app.html https://reactjs.org/docs/rendering-elements.html

PS 2：或者如果您真的想以舊方式進行操作

 import React from 'react' import './App.css' import Element from './test' function App() { return React.createElement('div', {}, React.createElement(Element)) } export default App

Answer 3

以下事情需要改進到您的代碼中 -

1-在 index.js 而不是 app.js 中使用根級渲染事物。

index.js

import React from "react";

import ReactDOM from "react-dom";

import App from "./App.js";  

ReactDOM.render(   
<App /> ,
document.getElementById("root")
);

2-使用 App.js 文件將所有其他組件累積到其中。

應用程序.js

從'./Element'導入元素

function App() {
return (
<div className='App'>
  <Element />
</div>
)
}

PS：了解 React 的層次結構及其流程。 此鏈接可能會有所幫助：

反應渲染 - https://reactjs.org/docs/rendering-elements.html

React渲染介紹https://medium.com/information-and-technology/an-introduction-to-react-rendering-9c24a96b838b