رنج از حفاری پروانه را متوقف کنید: به 5 نکته مراجعه کنید که می تواند کد شما را ذخیره کند

function App() {
  const msg = "Passei pelo Header e pelo Wrapper e cheguei no Button!";
  return <Main msg={msg} />;
}

function Main({ msg }) {
  return <Header msg={msg} />;
}

function Header({ msg }) {
  return (
    <div>
      <h1>Header aquih1>
      <Wrapper msg={msg} />
    div>
  );
}

function Wrapper({ msg }) {
  return (
    <div>
      <h2>Wrapper aquih2>
      <Button msg={msg} />
    div>
  );
}

function Button({ msg }) {
  return (
    <div>
      <h3>Componente Buttonh3>
      <button onClick={() => alert(msg)}>Clique em mim!button>
    div>
  );
}

import { createContext, useContext } from 'react';

const MessageContext = createContext();

function App() {
  const msg = "Passei pelo contexto até chegar no Button!";
  return (
    <MessageContext.Provider value={msg}>
      <Main />
    MessageContext.Provider>
  );
}

function Main() {
  return <Header />;
}

function Header() {
  return (
    <div>
      <h1>Header aquih1>
      <Wrapper />
    div>
  );
}

function Wrapper() {
  return (
    <div>
      <h2>Wrapper aquih2>
      <Button />
    div>
  );
}

function Button() {
  const msg = useContext(MessageContext);
  return (
    <div>
      <h3>Componente Buttonh3>
      <button onClick={() => alert(msg)}>Clique em mim!button>
    div>
  );
}

npm install jotai

import { atom, useAtom } from 'jotai';

// Criando o átomo (estado global)
const messageAtom = atom("Passei via Jotai e cheguei no Button!");

function App() {
  return <Main />;
}

function Main() {
  return <Header />;
}

function Header() {
  return (
    <div>
      <h1>Header aquih1>
      <Wrapper />
    div>
  );
}

function Wrapper() {
  return (
    <div>
      <h2>Wrapper aquih2>
      <Button />
    div>
  );
}

function Button() {
  const [msg] = useAtom(messageAtom);
  return (
    <div>
      <h3>Componente Buttonh3>
      <button onClick={() => alert(msg)}>Clique em mim!button>
    div>
  );
}

npm install zustand

import create from 'zustand';

const useStore = create((set) => ({
  msg: 'Passei via Zustand!',
}));

function App() {
  return <Main />;
}

function Main() {
  return <Header />;
}

function Header() {
  return (
    <div>
      <h1>Headerh1>
      <Wrapper />
    div>
  );
}

function Wrapper() {
  return (
    <div>
      <h2>Wrapperh2>
      <Button />
    div>
  );
}

function Button() {
  const msg = useStore((state) => state.msg);
  return (
    <div>
      <h3>This is the Button componenth3>
      <button onClick={() => alert(msg)}>Click me!button>
    div>
  );
}