嗨，這似乎應該很簡單，但無論我進行了多少次搜索，我似乎都找不到明確的答案，或者我只是從根本上誤解了某些東西。我想添加一個簡單的組件。
我有一個簡單的反應應用程式，這里是 app.js
import logo from './logo.svg';
import './App.css';
import fortune from './fortune.js' ;
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Wowsersssss
</p>
<button onclick="myFortune()">Fortune</button>
</header>
</div>
);
}
export default App;和我正在匯入的一個簡單組件
import React from 'react';
import ReactDOM from 'react-dom';
function fortune() {
const message = () => {
alert("Hello");
}
return (
<button onClick={message}>Click Here</button>
);
}
ReactDOM.render(<fortune />, document.getElementById('root'));我現在如何將其插入到 app.js 中？
如果有人能告訴我在哪里添加它，我真的很感激。
謝謝！
uj5u.com熱心網友回復：
你似乎把代碼弄錯了。App應該是附加到 DOM 中主要 react 元素的組件（通常），然后您匯入新組件。此外，新組件的名稱應以Pascal Case格式書寫，否則會出錯。
所以在這里我創建了一個MyFortune組件，并將它匯入到App.
function MyFortune() {
function message() {
console.log('Hello');
}
return (
<button
onClick={message}
>Click Here
</button>
);
}
// export default MyFortune;
// import MyFortune from './MyFortune';
function App() {
return (
<div>
<header>
<p>Wowsersssss</p>
<MyFortune />
</header>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>uj5u.com熱心網友回復：
您需要匯出組件本身，以便您可以匯入它。您還需要將組件的函式名稱大寫。
import React from 'react'
function Fortune(){
function clicked(){
console.log('clicked')
}
return(
<button onClick={clicked}>I am a button</button>
)
}
export default Fortune
*//////////////*
import Fortune from './Fortune'
//Assuming they're in the same folder level
//You can Display it by Declaring it inside the <> just like meta tags do
<Fortune />
您可以向組件添加一個 onlick 函式，但該函式必須在 return 陳述句上方（如果復雜）或者可以是 JSX 回傳部分上的單行代碼。請注意，React 在這些函式上使用了 pascal Case 在呼叫時像 onClick 不是 onclick， className 不是 className 。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/322636.html
標籤：javascript 反应 github github页面
上一篇：如何同步另一臺電腦未提交的代碼？