如何在 ReactJS 中建立可重複使用的 Button 元件

按鈕無疑是任何 React 應用程式中重要的 UI 元件，按鈕可能用於提交表單或開啟新頁面等場景。您可以在 React.js 中建立可重複使用的按鈕元件，您可以在應用程式的不同部分中使用它們。因此，維護您的應用程式將更加簡單，並且您的程式碼將保持 DRY（不要重複）。

您必須先在元件資料夾中建立一個名為 Button.jsx 的新文件，才能建立可重複使用的按鈕元件。下一步是定義函數“Button”，它接受參數 text 和 onClick。

按鈕上顯示的文字包含在 text 屬性中。單擊按鈕時，將呼叫 onClick 屬性指定的函數。

最後，您必須傳回一個「button」元素，該元素的 text 屬性設定為要在按鈕上顯示的文本，並將 onClick 屬性設定為按鈕的 onclick 事件的處理程序。

這是 React.js 中可重複使用按鈕元件的範例：

const Button = ({ text, onClick }) => {
  return (
    <button
      type="button"
      style={{
        margin: 10px,
      }}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

export default Button;

建立可重複使用按鈕元件後，您可以將其匯入到您想要使用它的任何其他元件中。例如，您可以建立一個名為 MyComponent 的元件，該元件使用 Button 元件來呈現帶有文字的按鈕「點擊我！」。

以下是如何在另一個元件中使用 Button 元件的範例：

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

const MyComponent = () => {
  return (
    <div>
      <Button text="Click me!" onClick={() => console.log("Button clicked!")} />
    </div>
  );
};

export default MyComponent;

這將呈現一個帶有文字「Click me!」的按鈕。點擊按鈕時，將呼叫 console.log 函數並顯示訊息「Button clicked!」將被記錄到控制台。

您也可以使用 Button 元件建立不同樣式的按鈕。例如，您可以為按鈕元素新增一個類別以套用自訂樣式。例如：

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

const MyComponent = () => {
  return (
    <div>
      <Button text="Click me!" onClick={() => console.log("Button clicked!")} className="my-custom-class" />
    </div>
  );
};

export default MyComponent;

這將呈現一個帶有文字「Click me!」的按鈕。該按鈕還將套用 my-custom-class 類別。您可以使用此類在 CSS 檔案中設定按鈕的樣式。

以上是如何在 ReactJS 中建立可重複使用的 Button 元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！