Кнопки, несомненно, являются важными компонентами пользовательского интерфейса любого реагирующего приложения. Кнопки могут использоваться в таких сценариях, как отправка формы или открытие новой страницы. Вы можете создавать повторно используемые компоненты кнопок в React.js, которые можно использовать в разных разделах вашего приложения. В результате поддержка вашего приложения станет проще, а ваш код останется СУХИМ (не повторяйтесь).

Сначала вам необходимо создать новый файл в папке компонентов с именем Button.jsx, чтобы создать повторно используемый компонент кнопки. Следующим шагом является определение функции «Кнопка», которая принимает параметры text и onClick.

Текст, который будет отображаться на кнопке, содержится в текстовом свойстве. При нажатии кнопки будет вызвана функция, указанная в свойстве onClick.

Наконец, вы должны вернуть элемент «button», у которого в свойстве text задан текст, который будет отображаться на кнопке, а в свойстве onClick установлен обработчик события onclick кнопки.

Вот пример повторно используемого компонента кнопки в React.js:

const Button = ({ text, onClick }) => {
  return (
    
      {text}
    
  );
};

export default Button;

После того как вы создали компонент многократного использования кнопки, вы можете импортировать его в любой другой компонент, в котором хотите его использовать. Например, вы можете создать компонент под названием MyComponent, который использует компонент Button для визуализации кнопки с текстом. «Нажми на меня!».

Вот пример использования компонента Button в другом компоненте:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    

       console.log("Button clicked!")} />
    
  );
};

export default MyComponent;

Появится кнопка с текстом «Нажмите на меня!». При нажатии кнопки будет вызвана функция console.log и появится сообщение «Кнопка нажата!» будет зарегистрирован в консоли.

Вы также можете использовать компонент «Кнопка» для создания кнопок разных стилей. Например, вы можете добавить класс к элементу кнопки, чтобы применить собственный стиль. Например:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    

       console.log("Button clicked!")} className="my-custom-class" />
    
  );
};

export default MyComponent;

Появится кнопка с текстом «Нажмите на меня!». К кнопке также будет применен класс my-custom-class. Вы можете использовать этот класс для стилизации кнопки в вашем CSS-файле.