Блог

Итак , я новичок в ReactJS (в частности, я использую NextJS), здесь у нас есть два файла index.js и welcome.js

В index.js я добавил как компонент, и есть константа под названием hideWelcome, чтобы скрыть этот компонент и выполнить некоторые действия, но я хотел бы вызвать hideWelcome в кнопке, которая находится внутри приветствия.

Вот код :

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} />)
}
 

Передайте hideWelcome как реквизит, а затем используйте его внутри Welcome

 export default function Home() {
  const hideWelcome = () => {
    // do sth here
  };

  return (<Welcome hideWelcome={hideWelcome}/>)
}

export default function Welcome({ hideWelcome }) {
  return(
    <Button onClick={hideWelcome} />
  )
}
 

Вы можете отправить hideWelcome в качестве реквизита и вызвать его в компоненте приветствия из реквизита:

 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 }) 
 

Или просто вызываю реквизит.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} />)
}