簡潔なReactコンポーネントを書くためのヒント

エクスポートconst sampleFunction = ({ param1, param2, param3 }) => {
  コンソールにログ出力します。
}

'react' から React をインポートします

デフォルトの関数 SampleComponent({ onValueChange }) をエクスポートします。

  const handleChange = (キー) => {
    戻り値 (e) => onValueChange(キー、e.target.value)
  }

  戻る （
    <フォーム>
      <input onChange={handleChange('name')} />
      <input onChange={handleChange('email')} />
      <input onChange={handleChange('phone')} />
    </フォーム>
  ）
}

'react' から React をインポートします

const Student = ({ name }) => <p>生徒名: {name}</p>
const Teacher = ({ name }) => <p>教師名: {name}</p>
const Guardian = ({ name }) => <p>ガーディアン名: {name}</p>

デフォルト関数 SampleComponent({ user }) をエクスポートします。
  コンポーネントを Student にします。
  if (user.type === '教師') {
    コンポーネント = 教師
  } それ以外の場合 (user.type === 'guardian') {
    コンポーネント = ガーディアン
  }

  戻る （
    <div>
      <コンポーネント名={user.name} />
    </div>
  ）
}

'react' から React をインポートします

const Student = ({ name }) => <p>生徒名: {name}</p>
const Teacher = ({ name }) => <p>教師名: {name}</p>
const Guardian = ({ name }) => <p>ガーディアン名: {name}</p>

定数COMPONENT_MAP = {
  学生: 学生、
  先生：先生、
  ガーディアン: ガーディアン
}

デフォルト関数 SampleComponent({ user }) をエクスポートします。
  const コンポーネント = COMPONENT_MAP[user.type]

  戻る （
    <div>
      <コンポーネント名={user.name} />
    </div>
  ）
}

'react' から React をインポートします。{useCallback、useState }。
'components/global/ConfirmationDialog' から ConfirmationDialog をインポートします。

デフォルト関数 useConfirmationDialog({ をエクスポートする
  ヘッダーテキスト、
  本文、
  確認ボタンテキスト、
  確認クリック時、
}) {
  定数[isOpen, setIsOpen] = useState(false);

  定数 onOpen = () => {
    setIsOpen(true);
  };

  定数ダイアログ = useCallback(
    （） => （
      <確認ダイアログ
        ヘッダーテキスト={ヘッダーテキスト}
        本文={本文}
        isOpen={isOpen}
        onConfirmClick={onConfirmClick}
        onCancelClick={() => setIsOpen(false)}
        確認ボタンテキスト={確認ボタンテキスト}
      />
    ）、
    [開く]
  );

  戻る {
    ダイアログ、
    オープン時、
  };
}

「react」からReactをインポートします。
'./useConfirmationDialog' から { useConfirmationDialog } をインポートします。

関数クライアント() {
  const { ダイアログ、onOpen } = useConfirmationDialog({
    headerText: "このレコードを削除しますか?"
    本文:
      「このレコードを削除してもよろしいですか? 元に戻すことはできません。」
    確認ボタンテキスト:「削除」、
    onConfirmClick: handleDeleteConfirm、
  });

  関数handleDeleteConfirm() {
    //TODO: 削除
  }

  const handleDeleteClick = () => {
    オープン時();
  };

  戻る （
    <div>
      <ダイアログ />
      <ボタンのonClick={handleDeleteClick} />
    </div>
  );
}

デフォルトのクライアントをエクスポートします。

'react' から React をインポートします
'react-beautiful-dnd' から { DragDropContext, Droppable } をインポートします。
デフォルト関数DraggableSample()をエクスポートする{
  関数handleDragStart(結果) { 
    console.log({ 結果 });
  }
  関数handleDragUpdate({ destination }) { 
    console.log({ 宛先 });
  }
  const handleDragEnd = ({ ソース、 宛先 }) => { 
    console.log({ ソース、 宛先 });
  };
  戻る （
    <div>
      <ドラッグドロップコンテキスト
        onDragEnd={handleDragEnd}
        onDragStart={handleDragStart}
        onDragUpdate={handleDragUpdate}
      >
        <ドロップ可能 
          droppableId="ドロップ可能"
          方向="水平"
        >
          {(提供) => (
            <div {...provided.droppableProps} ref={provided.innerRef}> 
              {columns.map((列, インデックス) => {
                戻る （
                  <列コンポーネント
                    キー={インデックス}
                    列={列}
                  />
                );
              })}
            </div>
          )}
        </ドロップ可能>
      </ドラッグドロップコンテキスト>
    </div>
  ）
}

'react' から React をインポートします
デフォルト関数DraggableSample()をエクスポートする{
  戻る （
    <div>
      <ドラッグラッパー> 
      {columns.map((列, インデックス) => { 
        戻る （
          <ColumnComponent キー = {インデックス} 列 = {列} />
        );
      })}
      </ドラッグラッパー>
    </div>
  ）
}

'react' から React をインポートします
'react-beautiful-dnd' から { DragDropContext, Droppable } をインポートします。
デフォルトの関数DragWrapper({children})をエクスポートします。
  関数handleDragStart(結果) { 
    console.log({ 結果 });
  }
  関数handleDragUpdate({ destination }) { 
    console.log({ 宛先 });
  }
  const handleDragEnd = ({ ソース、 宛先 }) => { 
    console.log({ ソース、 宛先 });
  };
  戻る （
    <ドラッグドロップコンテキスト 
      onDragEnd={handleDragEnd}
      onDragStart={handleDragStart} 
      onDragUpdate={handleDragUpdate}
    >
      <ドロップ可能 droppableId="ドロップ可能" direction="水平"> 
        {(提供) => (
          <div {...provided.droppableProps} ref={provided.innerRef}> 
            {子供たち}
          </div>
        )}
      </ドロップ可能>
    </ドラッグドロップコンテキスト>
  ）
}

'react' から React をインポートします
'./API' から { someAPICall } をインポートします。 
'./ItemDisplay' から ItemDisplay をインポートします。
デフォルト関数SampleComponent()をエクスポートします。 
  const [データ、setData] = useState([])
  使用効果(() => { 
    someAPICall().then((結果) => { setData(結果)})
  }, [])
  関数 handleDelete() { console.log('削除!'); }
  関数 handleAdd() { console.log('追加!'); }
  const handleEdit = () => { console.log('編集!'); };
  戻る （
    <div>
      <div>
        {data.map(item => <ItemDisplay item={item} />)} 
      </div>
      <div>
        <ボタンのクリック={handleDelete} /> 
        <ボタンのクリック時={handleAdd} /> 
        <ボタン onClick={handleEdit} /> 
      </div>
    </div>
  ）
}

'react' から React をインポートします
'./ItemDisplay' から ItemDisplay をインポートします。
デフォルト関数SampleComponent()をエクスポートします。
  const { データ、handleDelete、handleEdit、handleAdd } = useCustomHook()
  戻る （
    <div>
      <div>
        {data.map(item => <ItemDisplay item={item} />)} 
      </div>
      <div>
        <ボタンのクリック={handleDelete} /> 
        <ボタンのクリック時={handleAdd} /> 
        <ボタン onClick={handleEdit} /> 
      </div>
    </div>
  ）
}

'./API' から { someAPICall } をインポートします。
エクスポートconst useCustomHook = () => { 
  const [データ、setData] = useState([])
  使用効果(() => { 
    someAPICall().then((結果) => { setData(結果)})
  }, [])
  関数 handleDelete() { console.log('削除!'); }
  関数 handleAdd() { console.log('追加!'); }
  const handleEdit = () => { console.log('編集!'); };
  戻り値: { handleEdit、handleAdd、handleDelete、data }
}

'react' から React をインポートします
エクスポートデフォルト関数SampleComponent({データ}) {
  const ItemDisplay = ({名前、日付}) => ( 
    <div>
      <h3>{名前}</h3>
      <p>{日付}</p>
    </div> 
  ）
  戻る （
    <div>
      <div>
        {data.map(item => <ItemDisplay item={item} />)}
      </div>
    </div> 
  ）
}