Блог

Я хотел бы иметь глобальный компонент Spinner.js чтобы вызвать все компоненты для показа счетчика. Это мой код со ссылкой, но он не работает.

Root.js

 export const spinner = React.createRef()

const Root = () => {

  return (

      {/* SPINNER */}    
        <SpinnerCustom ref={spinner} />
      {/* END SPINNER */}



      {/* NAV BAR */}
      <Navbar />
      {/* END NAV BAR */}

 

      {/* SWITCH */}
      <Switch>
        <Route component={Home} path="/" />
      </Switch>
      {/* END SWITCH */}

  )
}

export default Root;
 

Home.js

 const Home = () => {

    function test(){
      spinner.show();
    }

    return (
      <>
      <button onClick={test}>TEST</button>
      </>
    );

}


export default Home;
 

Я новичок в React.
Спасибо всем 🙂

Если вы хотите показывать счетчик, когда что-то меняется, используйте фрагмент состояния для прослушивания этих изменений. Вот полный пример на CodeSandbox.

Кодекс:

1. Импортирует Spinner компонент , чтобы его можно было использовать внутри Home .
2. Реализует перехват useState для управления вызываемой частью состояния visible .
3. Присоединяет setVisible() функцию к обработчику нажатия кнопки. При каждом нажатии кнопки значение visible переключается с true на false или с false на true .
4. Условно отображается <Spinner /> только тогда, когда visibility=true .

 import React, { useState } from "react";
import Spinner from "./Spinner";

const Home = () => {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <p>
        This is the Home component. The Spinner component has been imported, so
        I can use it below. The spinner will appear/disappear with each button press.</p>

      {visible ? <Spinner /> : null}

      <button onClick={() => setVisible(!visible)}>Toggle Spinner</button>
    </div>
  );
};

export default Home;