反応で再利用!

再利用性とは何か
同じ目的のために別のコードを再書き込みすることなく別の目的のために再利用されることができるコードは再利用性です.

なぜ再利用性は?
さて、私が反応を学習し始めたとき、私は同じ質問をしました.なぜ、私たちはまっすぐにいくつかのより多くのコードを書いて、もう一つの構成要素をつくることができるとき、再利用可能なコンポーネントさえ必要としますか?さて、これは多くの方法に反します.彼らのうちの1人は乾いています.

Do not repeat yourself.

ソフトウェア開発の主要原則の一つ.
楽しい事実:私が反応を始めたとき、私は、どこでもコードを再利用することなく、普通のHTMLのように他のすべての構成要素を書くのに用いられました.(これを知るまでは)

どのように再利用性を達成することができますか?
よく、再利用性を達成する多くの方法があります.それはちょうどあなたが書いているコードの種類によって異なります.この記事では、あなたが反応プロジェクトのどこでも再利用することができる反応で再利用可能なボタンコンポーネントを構築する方法を示すつもりです.

ステップ1
考えを開始します:再利用性のないコンポーネントとしてボタンを使用するには、プロジェクトでこのようなことをします.
ボタンをクリックします.JS

CancelButton.JS

ShareButton.jsと.それで.

私は、あなたがすでにここで問題を感じることができると思います.できませんか.あなたがそうすることができないならば、ここでは、以下の通りです:コンポーネントの同じタイプのために類似している/重複しているコードによる複数のファイル.(ボタン).
これは、プロジェクトが成長するにつれて、より複雑で迷惑なファイル構造を維持することを意味します.
では、どうやってこれを解決できますか?
よく、あなたがそれに与えられるデータであなたに結果を与えることができる構成要素を作ってください.それをしましょう.
反応プロジェクトを作成します.ここでcraを使いました.

create-react-app reusable-components

依存性:反応のアイコン

ステップ2
ボタンと呼ばれるコンポーネントを作成します.JSまたはあなたが好む名前で.
次のコードを配置します.

import React from "react";

export default ({ buttons }) => {
  const generatedButtons = buttons.map((button, index) => {
    const [icon, text, textColor, backgroundColor, buttonRadius, callback] = button;

    const Icon = icon;

    const styles = {
      receivedStyles: {
        color: textColor,
        background: backgroundColor,
        borderRadius: buttonRadius,
      },
      defaultStyles: {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        border: "none",
        padding: "0.6em 1.2em",
        margin: "1em",
        fontSize: "0.9em",
      },
    };
    const { receivedStyles, defaultStyles } = styles;
    return (
      <button
        key={index}
        style={
          icon
            ? { ...receivedStyles, ...defaultStyles }
            : { ...receivedStyles, ...defaultStyles, padding: "1em 1.5em" }
        }
        onClick={callback || null}
      >
        {icon && <Icon style={{ margin: "0.3em", fontSize: "1.5em" }} />}
        {text && text}
      </button>
    );
  });

  return (
    <div>
      {generatedButtons}
    </div>
  );
};

上記のコードのロジックは非常に簡単です.我々は、異なるボタンにマップする個々の配列データを含む2次元配列をマップするだけです.そして、条件付きのレンダリングのビットで、我々は彼らが与えられたデータに基づいて異なってそれらを表示します.

使い方
それはあまりにも簡単です.

import Button from "./Button";
import { IoMdDoneAll as DoneIcon } from "react-icons/io";
import {FaCloudDownloadAlt as CloudDownloadIcon, FaShareAlt as ShareIcon,} from "react-icons/fa";
import { MdCancel as CancelIcon } from "react-icons/md";

const styles = {
 height: "100vh",
 width: "100%",
 display: "flex",
 alignItems: "center",
 justifyContent: "center",
 background: "#242424",
};

function App() {
  return (
    <div style={styles}>
        <Button buttons={[
           [DoneIcon, "Done", "#fff", "#570C99", "6px", () => console.log("clicked: Done button")],
           [cloudDownloadIcon, "Download", "#fff","#009DAE", "100px",() => console.log("clicked: Download button") ],
           [CancelIcon, "Cancel", "#fff","#FF0000", "100px",() => console.log("clicked: Cancel button") ],
           [ShareIcon, "Share", "#fff", "#516BEB", null,() => console.log("clicked: Share button") ] ]}
    </div>
  );
}

export default App;

最後に、結果!

どのように別のボタンをレンダリングを参照してください?そして、すべての単一のコンポーネントから?よく使用可能なコードの魔法です.
そして、彼らのコールバックは、完全に働きます!


終わり.
あなたが新しい何かを学んだという望み.読書ありがとう.ハッピーコーディング!❤️