#reactjs
#reactjs
Вопрос:
Я хотел бы иметь глобальный компонент 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.
Спасибо всем 🙂
Комментарии:
1. Как выглядит код для SpinnerCustom?
2. это фрагмент SpinnerCustom.js codepen.io/paolovox/pen/jOMYvWd
Ответ №1:
Если вы хотите показывать счетчик, когда что-то меняется, используйте фрагмент состояния для прослушивания этих изменений. Вот полный пример на CodeSandbox.
Кодекс:
- Импортирует
Spinner
компонент , чтобы его можно было использовать внутриHome
. - Реализует перехват useState для управления вызываемой частью состояния
visible
. - Присоединяет
setVisible()
функцию к обработчику нажатия кнопки. При каждом нажатии кнопки значениеvisible
переключается сtrue
наfalse
или сfalse
наtrue
. - Условно отображается
<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;
Комментарии:
1. спасибо за ответ. Существует ли способ избежать импорта и ответа в коде каждый раз? Я хотел бы отозвать его с помощью глобальной функции startSpinner() stopSpinner()
2. Возможно, я не понял ваш вопрос. Все компоненты в React являются повторно используемыми и, следовательно, глобальными. Если вы хотите создавать повторно используемые функции, это также возможно. Чтобы создать повторно используемые вспомогательные функции, просто создайте файл (например
helpers.js
) и сохраните в нем свои функции. Обратите внимание, вспомогательные функции по-прежнему необходимо импортировать / экспортировать с помощью операторов импорта узлов .