ダミーのための React でのコンポジション

数十年後 👩‍💻、プログラミングは数学や社会学をやっているようなものだという結論に達しました.

私の社会学の授業から引き出された、「全体はその部分の合計よりも大きい」というデュルケームの概念は、React の構成の考え方に何らかの形で適合します.構成とは、部分を組み合わせて全体を形成する行為です.さて、代数 (ここから数学の部分に入ります 😀) では、2 つの関数が与えられると、合成は関数 f 🍞 を関数 g 🥪 の出力に適用します (f と g の両方が他の関数が存在することを知らないと述べながら、は).これはとても重要な概念ですが、考えすぎると眠くなってしまうかもしれないので、ここでは説明しません…😴.

React に戻ると、コンポーネントを完全に再利用可能🚀かつ構成可能🚀にするために、「props」の概念を使用して、あるコンポーネントから別のコンポーネントにデータを渡します.コンポーネントのプロパティ値がコンポーネント自体に設定されていないことが重要です.コンポーネント内でコンポーネントのプロパティ値を設定すると、同じ引数に対して常に同じ結果が返されます.しかし、このコンポーネントを再利用したいので、必要に応じて「props」を設定できるようにする必要があります.

All react components must act like pure functions with respect to their properties ('props').

次の関数 TabsMenuItem では、 props がすべてのプロパティを保持するオブジェクトです.これらのプロパティは、TabsMenuItem コンポーネントではなく、TabsMenuItem をインポートするコンポーネント (アプリなど) で設定されます. props には他の名前を付けることができますが、小道具である必要はありません.

以下は、TabsMenuItem コンポーネントの例です.

function TabsMenuItem(props) {
  return (
    <div>
      <p className="panel-tabs">
        <a className="is-active">{props.tabMenuItem1}</a>
        <a>{props.tabMenuItem2}</a>
      //and so on

そして、これはそのプロパティがアプリでどのように定義されているかです:

function App() {
  return (
          <TabsMenuItem
            tabMenuItem1="First tab label"
            tabMenuItem2="Second tab label"
//and so on

パーフェクト!

子と親の関係は、親を紹介したいときに発生します.たとえば、PanelItem コンポーネント (親) で TabsMenuItem コンポーネント (子) をラップしたい場合.

function PanelItem(props) {
  return (
    <div>
      <article className="panel is-primary">
        {props.children}
      </article>
    </div>
  );
}

悪名高い props.children を使用して、必要な場所に子を配置しない限り、上記は機能しません. props が子のオブジェクトを保持していることに注意してください.

もちろん、PanelItem を TabsMenuItem コンポーネントにインポートしてから、次のように PanelItem を挿入する必要があります.

function TabsMenuItem(props) {
  return (
    <div>
      <PanelItem>

      <p className="panel-tabs">
        <a className="is-active">{props.tabMenuItem1}</a>
       //and so on

      </PanelItem>

Inheritance is about the relationship of an ancestor and a descendant whereas composition is about a parent and their child.

この例では、React を始めたすべての人にとって、Composition は実際に理にかなっていると思います. 😊感想聞かせてね!プログラミングの努力を頑張ってください!