- インストール
- なぜReactなのか?
- API
- 子供
- cloneElement
- コンポーネント
- concatChildren
- createContext
- createElement
- createInterpolateElement
- createPortal
- createRef
- createRoot
- findDOMNode
- flushSync
- forwardRef
- Fragment
- hydrate
- hydrateRoot
- isEmptyElement
- isValidElement
- lazy
- memo
- Platform
- PureComponent
- RawHTML
- render
- renderToString
- startTransition
- StrictMode
- Suspense
- switchChildrenNodeName
- unmountComponentAtNode
- useCallback
- useContext
- useDebugValue
- useDeferredValue
- useEffect
- useId
- useImperativeHandle
- useInsertionEffect
- useLayoutEffect
- useMemo
- useReducer
- useRef
- useState
- useSyncExternalStore
- useTransition
- このパッケージへの貢献
インストール
モジュールをインストールします
npm install @wordpress/element --save
このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。このような言語機能やAPIのサポートが限られているか、まったくない環境を使用している場合は、コードに@wordpress/babel-preset-default
で提供されるポリフィルを含める必要があります。
なぜReactなのか?
単一の「最良」のフロントエンドフレームワークに関する議論を引き起こすリスクを冒して、ツールを使用する選択は、システムの要件を具体的に満たすために動機付けられるべきです。ブロックの概念をモデル化する際、以下の技術要件を観察します:
- 基本的な値に基づくブロックの理解(ランダム画像の例では、カテゴリ)
- これらの値に基づいてブロックのUIを記述する手段
基本的には、Reactはシンプルな入力/出力メカニズムを提供します。入力のセット(「props」)が与えられた場合、開発者はページに表示される出力を記述します。 これは、その関数コンポーネントで最も優雅に観察されます。Reactは、望ましい出力とページの現在の状態を調整する役割を果たします。
これらの要件が増加するにつれて、任意のフレームワークの提供物は必然的により複雑になります。多くのフロントエンドフレームワークは、ページルーティング、データの取得と更新、レイアウトの管理に関するアイデアを規定しています。Reactもこの影響を受けますが、導入された複雑さはほとんどの場合、React自体によって引き起こされるのではなく、サポートツールの配置を管理することによって引き起こされます。これらの懸念をシステムの内部(WordPressコアコード)に隠すことによって、プラグイン作成者の責任を小さく、明確な接点のセットに最小限に抑えることができます。
API
子供
Reactの子供を扱うためのユーティリティを提供するオブジェクトです。
cloneElement
拡張されたpropsを持つ要素のコピーを作成します。
パラメータ
- element
Element
: 要素 - props
?Object
: 複製された要素に適用するprops
戻り値
コンポーネント
WordPressコンポーネントを作成するための基本クラス(Refs、状態、ライフサイクルフック)
concatChildren
2つ以上のReact子オブジェクトを連結します。
パラメータ
- childrenArguments
...?Object
: 連結する子引数の配列(配列の配列/文字列/オブジェクト)。
戻り値
createContext
プロバイダーとコンシューマーの2つのコンポーネントを含むコンテキストオブジェクトを作成します。
パラメータ
- defaultValue
Object
: コンテキストに保存されるデフォルトデータ。
戻り値
createElement
指定されたタイプの新しい要素を返します。タイプは、文字列のタグ名または要素を返す別の関数のいずれかです。
パラメータ
- type
?(string|Function)
: タグ名または要素作成者 - props
Object
: DOMノードに適用する属性セットまたは要素作成者に渡す値 - children
...Element
: 子孫要素
戻り値
createInterpolateElement
この関数は、特定のタグに一致する文字列から補間された要素を作成します。文字列が要素に変換される方法を示す変換マップの値を使用します。
使用法
例えば、次の文字列の場合:
「これは、
\aリンク\と自己閉じる
タグを持つ文字列です」
変換マップの値は次のようになります:
{
span: <span />,
a: <a href={ 'https://github.com' } />,
CustomComponentB: <CustomComponent />,
}
パラメータ
- interpolatedString
string
: 解析される補間文字列。 - conversionMap
Record<string, Element>
: 文字列をReact要素に変換するために使用されるマップ。
戻り値
createPortal
コンポーネントをレンダリングできるポータルを作成します。
関連
パラメータ
- child
import('react').ReactElement
: 要素、文字列、またはフラグメントなどのレンダリング可能な子。 - container
HTMLElement
: 要素がレンダリングされるDOMノード。
createRef
レンダリングされた要素への参照を追跡するオブジェクトを返します。current
プロパティを介して、DOMElementまたはElementのいずれかに依存します。
戻り値
createRoot
ターゲットDOMノードの新しいReactルートを作成します。
関連
変更履歴
findDOMNode
ReactコンポーネントのDOMノードを見つけます。
パラメータ
flushSync
Reactに提供されたコールバック内のすべての更新を同期的にフラッシュさせます。
パラメータ
forwardRef
ラップされたコンポーネントにrefを渡すことを可能にするコンポーネントエンハンサー。props
とref
を引数として受け取る関数引数を渡し、フォワードされたrefを使用して要素を返します。戻り値は、refをフォワードする新しいコンポーネントです。
パラメータ
- forwarder
Function
:props
とref
を受け取る関数で、要素を返すことが期待されます。
戻り値
Fragment
子供をラップする要素なしでレンダリングするコンポーネントです。
hydrate
非推奨 WordPress 6.2.0以降。代わりに
hydrateRoot
を使用してください。
指定された要素をターゲットDOMノードにハイドレートします。
関連
hydrateRoot
ターゲットDOMノードの新しいReactルートを作成し、事前生成されたマークアップでハイドレートします。
関連
変更履歴
isEmptyElement
提供されたWP要素が空であるかどうかをチェックします。
パラメータ
- element
*
: チェックするWP要素。
戻り値
isValidElement
オブジェクトが有効なReact要素であるかどうかをチェックします。
パラメータ
- objectToCheck
Object
: チェックされるオブジェクト。
戻り値
lazy
関連
memo
関連
Platform
現在使用されているプラットフォームを検出するために使用されるコンポーネント。Platform.OS === ‘web’を使用して、Web環境で実行されているかどうかを検出します。
これはReact Nativeの実装と同じ概念です。
関連
使用法
import { Platform } from '@wordpress/element';
const placeholderLabel = Platform.select( {
native: __( 'Add media' ),
web: __(
'Drag images, upload new ones or select files from your library.'
),
} );
PureComponent
関連
RawHTML
ラッパー要素なしで危険なHTMLをレンダリングすることが望ましい場合に、Fragmentの同等物として使用されるコンポーネント。追加のpropsを保持するために、div
ラッパーが作成されます。children
以外のpropsが渡された場合。
パラメータ
- props
RawHTMLProps
: 子供はHTMLの文字列または文字列の配列である必要があります。他のpropsはdivラッパーに渡されます。
戻り値
render
非推奨 WordPress 6.2.0以降。代わりに
createRoot
を使用してください。
指定された要素をターゲットDOMノードにレンダリングします。
関連
renderToString
React要素を文字列にシリアライズします。
パラメータ
- element
import('react').ReactNode
: シリアライズする要素。 - context
[Object]
: コンテキストオブジェクト。 - legacyContext
[Object]
: レガシーコンテキストオブジェクト。
戻り値
startTransition
関連
StrictMode
追加のチェックと警告をその子孫に対して有効にするコンポーネントです。
Suspense
関連
switchChildrenNodeName
子オブジェクト内のすべての要素のnodeNameを切り替えます。
パラメータ
- children
?Object
: 子オブジェクト。 - nodeName
string
: ノード名。
戻り値
unmountComponentAtNode
非推奨 WordPress 6.2.0以降。代わりに
root.unmount()
を使用してください。
ターゲットDOMノードからマウントされた要素を削除します。
関連
useCallback
関連
useContext
関連
useDebugValue
関連
useDeferredValue
関連
useEffect
関連
useId
関連
useImperativeHandle
関連
useInsertionEffect
関連
useLayoutEffect
関連
useMemo
関連
useReducer
関連
useRef
関連
useState
関連
useSyncExternalStore
関連
useTransition
関連
このパッケージへの貢献
これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。
このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。