React Hooksの使用例

NativeButtonProps = MyButtonProps & React.ButtonHTMLAttributes<HTMLElement> と入力します。

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

ButtonSize を 'large' | 'small' と入力します
タイプ ButtonType = 'primary' | 'default' | 'danger'

インターフェイス BaseButtonProps {
 クラス名?: 文字列;
 無効?: ブール値;
 サイズ?: ボタンサイズ;
 btnType?: ボタンタイプ;
 子?: React.ReactNode;
}

タイプ NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributes<HTMLElement>
const ボタン: React.FC<NativeButtonProps>= (props) => {
 定数{
 btnタイプ、
 クラス名、
 無効、
 サイズ、
 子供たち、
 //resProps は残りのすべてのプロパティを取得するために使用されます...resProps
 } = 小道具
 // btn、btn-lg、btn-primary
 const クラス = classNames('btn', className, {
 [`btn-${btnType}`]: btnType、
 [`btn-${size}`]: サイズ、
 「無効」: 無効
 })
 戻る （
 <ボタン
  className={クラス}
  無効={無効}
  {...resProps}
 >
  {子供たち}
 </ボタン>
 ）
}

ボタン.defaultProps = {
 無効: false、
 btnType: 'デフォルト'
}

デフォルトボタンをエクスポート

<ボタンが無効>こんにちは</ボタン>
<Button btnType='primary' size='large' className="haha">こんにちは</Button>
<Button btnType='danger' size='small' onClick={() => alert('haha')}>テスト</Button>

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// さまざまなタイプの引数が多数あります
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// その他の偽の値は無視されます
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

<button class="btn haha​​ ​​btn-primary btn-lg">こんにちは</button>

<メニュー defaultIndex={'0'} onSelect={(index) => {alert(index)}} mode="vertical" defaultOpenSubMenus={['2']}>
 <メニュー項目インデックス={'0'}>
 クールなリンク
 </メニュー項目>
 <メニュー項目インデックス={'1'}>
 クールなリンク2
 </メニュー項目>
 <サブメニュー title="ドロップダウン">
 <メニュー項目インデックス={'3'}>
  ドロップダウン 1
 </メニュー項目>
 <メニュー項目インデックス={'4'}>
  ドロップダウン 2
 </メニュー項目>
 </サブメニュー>
 <メニュー項目インデックス={'2'}>
 クールなリンク3
 </メニュー項目>
</メニュー>

<メニュー onSelect={(index) => {alert(index)}}>

タイプ SelectCallback = (selectedIndex: string) => void

インターフェースMenuProps {
 onSelect?: SelectCallback;
}

 const handleClick = (インデックス: 文字列) => {
 // onSelect はユニオン型であり、存在するかどうかは不明なので、判断する必要があります if (onSelect) {
  onSelect(インデックス)
 }
 }

if (displayName === 'メニュー項目' || displayName === 'サブメニュー') {
 // 要素をサンプルとして新しい React 要素を複製して返します。最初のパラメータは複製されたサンプルです。 return React.cloneElement(childElement, {
 インデックス: index.toString()
 })
} それ以外 {
 console.error("警告: メニューには MenuItem コンポーネントではない子があります")
}

React をインポートし、{useState、createContext} を 'react' から取得します。
'classnames' から classNames をインポートします
'./menuItem' から { MenuItemProps } をインポートします。

タイプ MenuMode = 'horizo​​ntal' | 'vertical'
タイプ SelectCallback = (selectedIndex: string) => void

エクスポートインターフェースMenuProps {
 defaultIndex?: string; // どのメニューサブコンポーネントが強調表示されるのに使用されますか? className?: string;
 モード?: MenuMode;
 スタイル?: React.CSSProperties;
 onSelect?: SelectCallback; // サブメニューをクリックするとコールバックがトリガーされます defaultOpenSubMenus?: string[]; 
}

// 親コンポーネントから子コンポーネントに渡されるデータ型を決定する interface IMenuContext {
 インデックス: 文字列;
 onSelect?: SelectCallback;
 モード?: MenuMode;
 defaultOpenSubMenus?: string[]; // コンテキストにデータを渡す必要がある
}

// 子コンポーネントに渡すコンテキストを作成する
// 一般的な制約。インデックスは入力する値なので、ここにデフォルトの初期値を記述します。 export const MenuContext = createContext<IMenuContext>({index: '0'})

const メニュー: React.FC<MenuProps> = (props) => {
 const { className、mode、style、children、defaultIndex、onSelect、defaultOpenSubMenus} = props
 // アクティブ状態の MenuItem は 1 つだけなので、その状態を制御するには useState を使用します。const [ currentActive, setActive ] = useState(defaultIndex)
 const クラス = classNames('menu-demo', className, {
 'menu-vertical': モード === 'vertical'、
 'menu-horizo​​ntal': モード === 'horizo​​ntal'
 })

 // menuItem をクリックした後にアクティブの変更を実装するために handleClick を定義します。const handleClick = (index: string) => {
 setActive(インデックス)
 // onSelect はユニオン型であり、存在するかどうかは不明なので、判断する必要があります if (onSelect) {
  onSelect(インデックス)
 }
 }

 // サブコンポーネントをクリックすると、onSelect 関数がトリガーされ、ハイライト表示が変更されます。const passingContext: IMenuContext = {
 // currentActive は string | undefined 型で、index は number 型なので、型 index をさらに明確にするために次の判断を行う必要があります: currentActive ? currentActive : '0',
 onSelect: handleClick, // コールバック関数、サブコンポーネントをクリックしたときにトリガーするかどうか mode: mode,
 デフォルトOpenSubMenus、
 }

 const レンダリング子 = () => {
 React.Children.map(children, (child, index) => { を返します。
  // child には多くの型が含まれています。スマートプロンプトを提供したい型を取得するには、型アサーション const childElement = child as React.FunctionComponentElement<MenuItemProps> を使用する必要があります。
  const { displayName } = 子要素の型
  if (displayName === 'メニュー項目' || displayName === 'サブメニュー') {
  // 要素をサンプルとして新しい React 要素を複製して返します。最初のパラメータは複製されたサンプルです。 return React.cloneElement(childElement, {
   インデックス: index.toString()
  })
  } それ以外 {
  console.error("警告: メニューには MenuItem コンポーネントではない子があります")
  }
 })
 }
 戻る （
 <ul className={クラス} style={スタイル}>
  <MenuContext.Provider 値 = {passedContext}>
  {レンダリング子()}
  </メニューコンテキスト.プロバイダー>
 </ul>
 ）
}

メニュー.defaultProps = {
 デフォルトインデックス: '0',
 モード: '水平'、
 デフォルトのOpenSubMenus: []
}

デフォルトメニューをエクスポート

'react' から React をインポートします
'react' から {useContext} をインポートします。
'classnames' から classNames をインポートします
'./menu' から { MenuContext } をインポートします。

エクスポートインターフェースMenuItemProps {
 インデックス: 文字列;
 無効?: ブール値;
 クラス名?: 文字列;
 スタイル?: React.CSSProperties;
}

const メニュー項目: React.FC<MenuItemProps> = (props) => {
 const { インデックス、無効、クラス名、スタイル、子 } = プロパティ
 const コンテキスト = useContext(メニューコンテキスト)
 const classes = classNames('メニュー項目', className, {
 'is-disabled': 無効、
 // 'is-active' を強調表示する特定のロジックを実装します: context.index === index
 })
 const ハンドルクリック = () => {
 // 無効にするとonSelectは使えなくなります。indexはオプションなので存在しない可能性があります。typeofを使って判断する必要があります if (context.onSelect && !disabled && (typeof index === 'string')) {
  コンテキスト.onSelect(インデックス)
 }
 }
 戻る （
 <li className={classes} style={style} onClick={handleClick}>
  {子供たち}
 </li>
 ）
}

MenuItem.displayName = 'メニュー項目'
デフォルトのメニュー項目をエクスポートする

'react' から React、{useContext、FunctionComponentElement、useState } をインポートします。
'classnames' から classNames をインポートします
'./menu' から { MenuContext } をインポートします。
'./menuItem' から { MenuItemProps } をインポートします。

エクスポートインターフェース SubMenuProps {
 インデックス?: 文字列;
 タイトル: 文字列;
 クラス名?: 文字列
}

const サブメニュー: React.FC<SubMenuProps> = ({ インデックス、タイトル、子、クラス名 }) => {
 const コンテキスト = useContext(メニューコンテキスト)
 // 次に、文字列配列のいくつかのメソッドを使用します。まず、型アサーションを作成し、文字列配列型としてアサートします。const openedSubMenus = context.defaultOpenSubMenus as Array<string>
 // include を使用してインデックスがあるかどうかを判断します
 const isOpened = (index && context.mode === 'vertical') ? openedSubMenus.includes(index) : false
 const [ menuOpen, setOpen ] = useState(isOpened) // isOpened は動的な値である true または false を返します。const classes = classNames('menu-item submenu-item', className, {
 'is-active': context.index === インデックス
 })
 // ドロップダウンメニューを表示または非表示にするために使用されます const handleClick = (e: React.MouseEvent) => {
 e.preventDefault()
 setOpen(!menuOpen)
 }
 タイマー: 任意
 // トグルは開くか閉じるかを決定するために使用されます const handleMouse = (e: React.MouseEvent, toggle: boolean) => {
 タイムアウトをクリア(タイマー)
 e.preventDefault()
 タイマー = setTimeout(()=> {
  setOpen(トグル)
 }, 300)
 }
 // 三項式、垂直 const clickEvents = context.mode === 'vertical' ? {
 onClick: ハンドルクリック
 } : {}
 const hoverEvents = context.mode === 'horizo​​ntal' ? {
 onMouseEnter: (e: React.MouseEvent) => { handleMouse(e, true) },
 onMouseLeave: (e: React.MouseEvent) => { handleMouse(e, false) },
 } : {}

 // ドロップダウン メニューの内容をレンダリングするために使用されます // 2 つの値を返します。1 つ目は子、2 つ目は i で表されるインデックスです。const renderChildren = () => {
 const subMenuClasses = classNames('menu-submenu', {
  'メニューを開いた': menuOpen
 })
 // 次の関数は、サブメニューにのみ MenuItem が存在することを実装するために使用されます。
 const childrenComponent = React.Children.map(children, (child, i) => {
  const childElement = 子を FunctionComponentElement<MenuItemProps> として定義します。
  子要素のtype.displayNameが'メニュー項目'の場合{
  React.cloneElement(childElement, { を返します。
   インデックス: `${index}-${i}`
  })
  } それ以外 {
  console.error("警告: SubMenu には MenuItem コンポーネントではない子があります")
  }
 })
 戻る （
  <ul className={サブメニュークラス}>
  {子コンポーネント}
  </ul>
 ）
 }
 戻る （
 // 演算子を展開し、内部に機能を追加し、外部にホバーします <li key={index} className={classes} {...hoverEvents}>
  <div className="サブメニュータイトル" {...clickEvents}>
  {タイトル}
  </div>
  {レンダリング子()}
 </li>
 ）
}

サブメニュー.displayName = 'サブメニュー'
デフォルトのサブメニューをエクスポート