TreeSelect

使用法

階層のページの親ページを選択するためのユーザーインターフェースをレンダリングします：

import { useState } from 'react';
import { TreeSelect } from '@wordpress/components';
const MyTreeSelect = () => {
   const [ page, setPage ] = useState( 'p21' );
   return (
   <TreeSelect
   __nextHasNoMarginBottom
   label="Parent page"
   noOptionLabel="No parent page"
   onChange={ ( newPage ) => setPage( newPage ) }
   selectedId={ page }
   tree={ [
   {
   name: 'Page 1',
   id: 'p1',
   children: [
   { name: 'Descend 1 of page 1', id: 'p11' },
   { name: 'Descend 2 of page 1', id: 'p12' },
   ],
   },
   {
   name: 'Page 2',
   id: 'p2',
   children: [
   {
   name: 'Descend 1 of page 2',
   id: 'p21',
   children: [
   {
   name: 'Descend 1 of Descend 1 of page 2',
   id: 'p211',
   },
   ],
   },
   ],
   },
   ] }
   />
   );
}

プロパティ

コンポーネントが受け入れるプロパティのセットは以下に示されます。

このセットに含まれていないプロパティは、使用されるSelectControlコンポーネントに適用されます。

ラベル

このプロパティが追加されると、ラベルプロパティをコンテンツとして使用してラベルが生成されます。

• タイプ: String
• 必須: いいえ
  

オプションなしラベル

このプロパティが追加されると、空の選択を表すためにこのラベルを持つオプションが追加されます。

• タイプ: String
• 必須: いいえ
  

変更時

選択されている新しいノード要素のIDを受け取る関数です。

• タイプ: function
• 必須: はい
  

選択されたID

現在選択されているノードのIDです。

• タイプ: string | string[]
• 必須: いいえ
  

ツリー

ユーザーが選択できる可能性のあるノードを持つツリーオブジェクトの配列です。

• タイプ: Object[]
• 必須: いいえ

__nextHasNoMarginBottom

将来のバージョンでデフォルトになる新しいマージンなしスタイルを選択し始めます。

• タイプ: Boolean
• 必須: いいえ
• デフォルト: false