按鈕無疑是任何 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中文網其他相關文章!