为什么组件不能在React JS中工作

Question

我正在尝试制作按钮，在制作按钮后，我想通过点击这个按钮来制作广告事件lisner，它会显示一些消息，但我只能创建按钮，但无法在上面添加事件侦听器。请帮我。

function Button()
{
return (
<button id='btn'>Masai</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(Button());
function showAlert()
{
return(
<p>You clicked Masai!</p>
);
}
const msg=ReactDOM.createRoot(document.querySelector('#message'));
document.querySelector('button').addEventListener('click',()=>{
msg.render(showAlert());
})

控制台部分中的图像中描述的错误

Answer 1

这不是您在react中尝试的方式。

在您的Index.js 中

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Button from './Button';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

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

在你的Button.js

function Button() {

const clickEvent = () => {

alert("You clicked Masai!");
}

return(
<button id='btn' onClick={clickEvent}>Masai</button>
);

}