ReactJS で再利用可能な Button コンポーネントを作成する方法

ボタンはあらゆる React アプリケーションの間違いなく重要な UI コンポーネントであり、ボタンはフォームの送信や新しいページを開くなどのシナリオで使用される可能性があります。 React.js で再利用可能なボタン コンポーネントを構築し、アプリケーションのさまざまなセクションで利用できます。その結果、アプリケーションの保守がより簡単になり、コードが DRY (繰り返さない) に保たれます。

再利用可能なボタン コンポーネントを構築するには、まずコンポーネント フォルダーに Button.jsx という名前の新しいファイルを作成する必要があります。次のステップは、パラメータ text と onClick を受け入れる関数 "Button" を定義することです。

ボタンに表示されるテキストは text prop に含まれます。ボタンをクリックすると、onClick プロパティで指定された関数が呼び出されます。

最後に、ボタンに表示されるテキストに設定された text プロップと、ボタンの onclick イベントのハンドラーに設定された onClick プロップを持つ「button」要素を返す必要があります。

これは React.js の再利用可能なボタン コンポーネントの例です:

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

export default Button;

再利用可能なボタン コンポーネントを作成したら、それを使用する他のコンポーネントにインポートできます。たとえば、Button コンポーネントを使用してテキストを含むボタンをレンダリングする MyComponent というコンポーネントを作成できます。 「クリックしてください！」。

別のコンポーネントで 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 コンポーネントを使用して、さまざまなスタイルのボタンを作成することもできます。たとえば、クラスをボタン要素に追加してカスタム スタイルを適用できます。例:

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 中国語 Web サイトの他の関連記事を参照してください。