インストール

モジュールをインストールします

  1. 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

戻り値

  • Element: 複製された要素。

コンポーネント

WordPressコンポーネントを作成するための基本クラス(Refs、状態、ライフサイクルフック)

concatChildren

2つ以上のReact子オブジェクトを連結します。

パラメータ

  • childrenArguments ...?Object: 連結する子引数の配列(配列の配列/文字列/オブジェクト)。

戻り値

  • Array: 連結された値。

createContext

プロバイダーとコンシューマーの2つのコンポーネントを含むコンテキストオブジェクトを作成します。

パラメータ

  • defaultValue Object: コンテキストに保存されるデフォルトデータ。

戻り値

  • Object: コンテキストオブジェクト。

createElement

指定されたタイプの新しい要素を返します。タイプは、文字列のタグ名または要素を返す別の関数のいずれかです。

パラメータ

  • type ?(string|Function): タグ名または要素作成者
  • props Object: DOMノードに適用する属性セットまたは要素作成者に渡す値
  • children ...Element: 子孫要素

戻り値

  • Element: 要素。

createInterpolateElement

この関数は、特定のタグに一致する文字列から補間された要素を作成します。文字列が要素に変換される方法を示す変換マップの値を使用します。

使用法

例えば、次の文字列の場合:

「これは、

\aリンク\と自己閉じる

タグを持つ文字列です」

変換マップの値は次のようになります:

  1. {
  2. span: <span />,
  3. a: <a href={ 'https://github.com' } />,
  4. CustomComponentB: <CustomComponent />,
  5. }

パラメータ

  • interpolatedString string: 解析される補間文字列。
  • conversionMap Record<string, Element>: 文字列をReact要素に変換するために使用されるマップ。

戻り値

  • Element: wp要素。

createPortal

コンポーネントをレンダリングできるポータルを作成します。

関連

パラメータ

  • child import('react').ReactElement: 要素、文字列、またはフラグメントなどのレンダリング可能な子。
  • container HTMLElement: 要素がレンダリングされるDOMノード。

createRef

レンダリングされた要素への参照を追跡するオブジェクトを返します。currentプロパティを介して、DOMElementまたはElementのいずれかに依存します。

戻り値

  • Object: Refオブジェクト。

createRoot

ターゲットDOMノードの新しいReactルートを作成します。

関連

変更履歴

6.2.0 WordPressコアに導入されました。

findDOMNode

ReactコンポーネントのDOMノードを見つけます。

パラメータ

  • component import('react').ComponentType: コンポーネントのインスタンス。

flushSync

Reactに提供されたコールバック内のすべての更新を同期的にフラッシュさせます。

パラメータ

  • callback Function: 同期的に実行されるコールバック。

forwardRef

ラップされたコンポーネントにrefを渡すことを可能にするコンポーネントエンハンサー。propsrefを引数として受け取る関数引数を渡し、フォワードされたrefを使用して要素を返します。戻り値は、refをフォワードする新しいコンポーネントです。

パラメータ

  • forwarder Function: propsrefを受け取る関数で、要素を返すことが期待されます。

戻り値

  • Component: 強化されたコンポーネント。

Fragment

子供をラップする要素なしでレンダリングするコンポーネントです。

hydrate

非推奨 WordPress 6.2.0以降。代わりにhydrateRootを使用してください。
指定された要素をターゲットDOMノードにハイドレートします。

関連

hydrateRoot

ターゲットDOMノードの新しいReactルートを作成し、事前生成されたマークアップでハイドレートします。

関連

変更履歴

6.2.0 WordPressコアに導入されました。

isEmptyElement

提供されたWP要素が空であるかどうかをチェックします。

パラメータ

  • element *: チェックするWP要素。

戻り値

  • boolean: 要素が空と見なされる場合はtrue。

isValidElement

オブジェクトが有効なReact要素であるかどうかをチェックします。

パラメータ

  • objectToCheck Object: チェックされるオブジェクト。

戻り値

  • boolean: objectToTestが有効なReact要素である場合はtrue、そうでない場合はfalse。

lazy

関連

memo

関連

Platform

現在使用されているプラットフォームを検出するために使用されるコンポーネント。Platform.OS === ‘web’を使用して、Web環境で実行されているかどうかを検出します。

これはReact Nativeの実装と同じ概念です。

関連

使用法

  1. import { Platform } from '@wordpress/element';
  2. const placeholderLabel = Platform.select( {
  3. native: __( 'Add media' ),
  4. web: __(
  5. 'Drag images, upload new ones or select files from your library.'
  6. ),
  7. } );

PureComponent

関連

RawHTML

ラッパー要素なしで危険なHTMLをレンダリングすることが望ましい場合に、Fragmentの同等物として使用されるコンポーネント。追加のpropsを保持するために、divラッパーが作成されます。children以外のpropsが渡された場合。

パラメータ

  • props RawHTMLProps: 子供はHTMLの文字列または文字列の配列である必要があります。他のpropsはdivラッパーに渡されます。

戻り値

  • JSX.Element: 危険にさらされるコンポーネント。

render

非推奨 WordPress 6.2.0以降。代わりにcreateRootを使用してください。
指定された要素をターゲットDOMノードにレンダリングします。

関連

renderToString

React要素を文字列にシリアライズします。

パラメータ

  • element import('react').ReactNode: シリアライズする要素。
  • context [Object]: コンテキストオブジェクト。
  • legacyContext [Object]: レガシーコンテキストオブジェクト。

戻り値

  • string: シリアライズされた要素。

startTransition

関連

StrictMode

追加のチェックと警告をその子孫に対して有効にするコンポーネントです。

Suspense

関連

switchChildrenNodeName

子オブジェクト内のすべての要素のnodeNameを切り替えます。

パラメータ

  • children ?Object: 子オブジェクト。
  • nodeName string: ノード名。

戻り値

  • ?Object: 更新された子オブジェクト。

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全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。