如何在react js中从不同的组件调用另一个组件中的函数?

Question

我有两个文件header.js和upload.js。在upload。js中，我有一个弹出模式当我点击header。js中的上传按钮时它会打开

我想从header。js

中调用upload。js中的setOpened函数header.js

import React from 'react'
const Header = () => {
return (
<div>
<Link
data-bs-toggle="modal"
onClick={() => setOpened(true)}
role="button"
>Upload</Link>
</div>
)
}
export default Header

upload.js

import React from 'react'
const [opened, setOpened] = useState(false);
const Upload = () => {
return (
<div>
<Modal
opened={opened}
onClose={() => setOpened(false)}
title="Introduce yourself!"
>
{/* Modal content */}
</Modal>
</div>
)
}
export default Upload

在App.js

import Header from './component/Header';
import Footer from './component/Footer';
import Upload from './component/Upload';
function App() {
return (
<Header/>
<Routes>
<Route path="/upload" element={<Upload/>}/>
</Routes>
<Footer/>
);
}
export default App;

Answer 1

为了回应@I-vasilich-I关于提升状态的评论，您应该将您的模态打开状态移动到更高的级别(如App)，并将该状态传递给需要它的每个子节点。

例如

const Header = ({ openModal }) => (
<div>
<Link data-bs-toggle="modal" onClick={openModal} role="button">
Upload
</Link>
</div>
);
const Upload = ({ opened, closeModal }) => (
<div>
<Modal opened={opened} onClose={closeModal} title="Introduce yourself!">
{/* Modal content */}
</Modal>
</div>
);
const App = () => {
const [opened, setOpened] = useState(false);
return (
<>
<Header openModal={() => setOpened(true)} />
<Routes>
<Route path="/upload" element={<Upload opened={opened} closeModal={() => setOpened(false)} />} />
</Routes>
<Footer />
</>
);
};

(注意确保添加了导入)