Hookの使用例:useTabs+関数要素のイベントの処理
7053 ワード
Tabウィンドウ機能を実現したCustom Hook.
このように
注意:Stackoverflow
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
Reference
この問題について(Hookの使用例:useTabs+関数要素のイベントの処理), 我々は、より多くの情報をここで見つけました https://velog.io/@hyunn/Hook-사용예제-useTabsテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol