Функции — отличный способ повторно использовать код при написании на ванильном Javascript. Это может сэкономить вам много времени и сделать ваш код чище и легче для чтения. Однако в React вы пишете свой код как класс или функциональные компоненты, которые также можно повторно использовать, передавая реквизиты. Я предполагаю, что вы прочитали сотни сообщений в блогах о том, как create-react-app
так что давайте вообще пропустим эту часть и просто начнем!
Мы создадим два простых компонента-кнопки, которые, естественно, будут console.log()
«Привет», а другой — «Шайа Лабаф». В нашей папке /src
давайте создадим подпапку с именем «components» и создадим наш компонент Button. Ваша файловая структура должна выглядеть так:
Давайте сделаем этот компонент функциональным компонентом. React Hooks были в моде в прошлом году, поэтому я предлагаю вам погуглить, если вы о них не слышали. Вот как теперь выглядит наш компонент Button:
import React from "react";
const Button = () => <button>something</button>;
export default Button;
Вау.
Теперь давайте перейдем к нашему файлу App.js и заменим начальный шаблон, который поставляется с create-react-app
, двумя нашими компонентами Button. Не забудьте импортировать его вверху!
import React from "react"; import "./App.css"; import Button from "./components/Button";
function App() { return ( <> <Button /> <Button /> </> ); }
export default App;
Запуск npm start
в вашем терминале оживит наш прекрасный веб-сайт. Просто две кнопки с надписью «что-то» в верхнем левом углу на белом фоне. Эй, я учу вас многоразовым компонентам, а не стилям.
Итак, в нынешнем виде у нас есть две кнопки, которые выглядят совершенно одинаково и делают одно и то же (ничего). Если вы обратили внимание, чтобы заставить одну и ту же кнопку делать разные вещи, вам нужно передать ей реквизиты от ее родителя. В данном случае это App.js.
Давайте различать две кнопки «что-то», передав им свойства label:
// App.js
<Button label="Hello" /> <Button label="Shia LaBeouf" />
И, получив реквизит в качестве аргумента, а затем вызвав эти реквизиты:
// Button.js
const Button = props => <button>{props.label}</button>;
Теперь взгляните на свой сайт. Одна кнопка говорит «Привет», а другая, естественно, говорит «Шиа». Думаю, вы понимаете, к чему я клоню с этим «реквизитом».
Давайте добавим наши обработчики onClick
, которые будут выполнять функцию для записи текста в нашу консоль:
// Button.js
const Button = props => <button onClick={props.log}> {props.label} </button>;
// App.js
const log = e => { console.log(e.target.textContent); };
function App() { return ( <> <Button label="Hello" log={log} /> <Button label="Shia LaBeouf" log={log} /> </> ); }
Теперь взгляните на свою консоль, когда вы нажимаете на одну из кнопок. Мы просто использовали один и тот же компонент Button, назвав его двумя разными именами и записав два разных имени в консоль. Это то, что люди называют повторно используемыми компонентами, и в этом сила React!