Hookの使用例:useTabs+関数要素のイベントの処理

Tabウィンドウ機能を実現したCustom Hook.

import React, {useState} from 'react';

const content = [
  {
    tab: "Section 1",
    content: "I'm the content of the Section 1"
  },
  {
    tab: "Section 2",
    content: "I'm the content of the Section 2"
  }
];

const useTabs = (initialTab, allTabs) => {
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  if(!allTabs || !Array.isArray(allTabs)){
    return;
  }
  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex
  }
}

const App = () => {
  const { currentItem, changeItem } = useTabs(1, content);
  return(
    <div>
      {content.map((section,index) => <button key={index} onClick={() => changeItem(index)}>{section.tab}</button>)}
      <div>{currentItem.content}</div>
    </div>
  )
}

export default App;

オブジェクトを返す場合は、{ currentItem, changeItem } = useTabs(1, content);のようにオブジェクトの値を直接書き込むことができるので便利そうです.

関数型構成部品のイベントを処理するときに関数を呼び出します。

<button key={index} onClick={() => changeItem(index)}>{section.tab}</button>

<button key={index} onClick={function(){changeItem(index)}}>{section.tab}</button>どちらも使用できますが、コールバック関数は簡単です.上記の方法のように使用する場合にのみ、ユーザーがボタンをクリックしたときにchangeItem関数が呼び出されます.

このように<button key={index} onClick={changeItem(index)}>{section.tab} </button>を使用すると、各レンダリングサイクルでchangeItem関数が呼び出されます.無限レンダリングにつながる可能性があるため、エラーが発生します.

注意:Stackoverflow