Javascript 如何将回调函数从现有网页传递给React组件？；
假设我有一个带有按钮的React组件，我想将该组件集成到现有的web页面（不是使用React构建的）。每次单击按钮时，我都想更改网页上的一些图像。我希望以某种方式将回调传递给React组件，并在单击按钮时调用回调，以便网页可以决定单击按钮时要执行的操作。这可能吗？如果是，我应该如何做？如果这是不可能的，有什么替代方案？我是否可以从组件中引发事件并让网页捕获它？我是前端开发新手，如果我疯了，请告诉我。：） 例如，该网页类似于：Javascript 如何将回调函数从现有网页传递给React组件？；,javascript,html,reactjs,typescript,frontend,Javascript,Html,Reactjs,Typescript,Frontend,假设我有一个带有按钮的React组件，我想将该组件集成到现有的web页面（不是使用React构建的）。每次单击按钮时，我都想更改网页上的一些图像。我希望以某种方式将回调传递给React组件，并在单击按钮时调用回调，以便网页可以决定单击按钮时要执行的操作。这可能吗？如果是，我应该如何做？如果这是不可能的，有什么替代方案？我是否可以从组件中引发事件并让网页捕获它？我是前端开发新手，如果我疯了，请告诉我。：） 例如，该网页类似于： <html> <head>
<html>
<head>
<title>Some title</title>
</head>
<body>
<image src="someURL"></image>
<div id="app"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="theReactComponent.jsx"></script>
</html>
一些头衔
import React from "react";
import { render } from "react-dom";
import App from "./App";
render(<App/>, document.getElementById("app"));
从“React”导入React；
从“react dom”导入{render}；
从“/App”导入应用程序；
render（，document.getElementById（“app”）；
import React from "react"
export default function App(): JSX.Element {
const onClick = () => {
// Call the callback function here to change the image in the html
}
return <button onClick={onClick}>Click here</button>;
}
从“React”导入React
导出默认函数App（）：JSX.Element{
const onClick=（）=>{
//在此处调用回调函数以更改html中的图像
}
返回点击这里；
}
imgsrcimport React from "react"
export default function App(): JSX.Element {
const onClick = () => {
const image = document.getElementById('image-id');
image.src = 'new-src';
}
return <button onClick={onClick}>Click here</button>;
}
从“React”导入React
导出默认函数App（）：JSX.Element{
const onClick=（）=>{
const image=document.getElementById（'image-id'）；
image.src='newsrc'；
}
返回点击这里；
}
请记住在DOM元素中添加
idclass