如何在React上的另一个类上调用const

Question

所以我是ReactJS的新手(特别是我使用的是NextJS(，这里有两个文件index.js和welcome.js

在index.js中，我添加了一个组件，有一个名为hideWelcome的常量来隐藏这个组件并执行一些操作，但我想在Welcome内部的按钮中调用hideWelWelcome。

这是代码：

index.js

import Welcome from ‘./welcome’
export default function Home() {
const hideWelcome = () => {
// do sth here
};
return (<Welcome />)
}

welcome.js

export default function Welcome() {
return(
<Button onClick={call hideWelcome from index.js} />)
}

Answer 1

将hideWelcome作为道具传递，然后在Welcome中使用

export default function Home() {
const hideWelcome = () => {
// do sth here
};
return (<Welcome hideWelcome={hideWelcome}/>)
}
export default function Welcome({ hideWelcome }) {
return(
<Button onClick={hideWelcome} />
)
}

Answer 2

您可以将hideWelcome作为道具发送，并在props:的Welcome组件中调用它

export default function Welcome({ hideWelcome }) {
return (
<Button onClick={hideWelcome} />)
}
export default function Home() {
const hideWelcome = () => {
console.log("Hide Welcome");
};
return (<Welcome hideWelcome={hideWelcome} />)
}

你可以破坏道具对象，比如：

Welcome({ hideWelcome }) 

或者只是打电话给props.hideWelcome

export default function Welcome(props) {
return (
<Button onClick={props.hideWelcome} />)
}
export default function Home() {
const hideWelcome = () => {
console.log("Hide Welcome");
};
return (<Welcome hideWelcome={hideWelcome} />)
}