React.Jsで別のコンポーネントの子としてコンポーネントを作成します

debugcn 投稿 Dev

尋ねる

別の親コンポーネントであるコンポーネントを作成します：Containerは親とContainer.Data子です。このようにして、コンポーネントに構造を追加できます。

const Container = ({ children }) => {
  return (
    <div>
      <h1>Container</h1>
      {children}
    </div>
  );
};

const Data = ({ children }) => {
  return <div>{children}</div>;
};

Container.Data = Data;

export { Container };


///

  <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Container>
        <Container.Data>item1</Container.Data>
        <Container.Data>item2</Container.Data>
      </Container>
      <Container.Data>item3</Container.Data>
  </div>

次の問題は次のとおり<Container.Data>item3</Container.Data>です。コンポーネントの外部にあり、機能しますが<Container.Data>item3</Container.Data>、親の外部を追加する場合Containerは、エラーが発生します。したがって、すべてのアイテムは内部にのみ存在する必要がありContainerます。
質問：これを行う方法は？
デモ：https：//codesandbox.io/s/stupefied-dubinsky-6lh8v？file = / src / Container.js：27-264

ドリューリース

React Contextを使用して、Data「チェックイン」するコンポーネントのコンテキストを作成します。提供するdefaultValueプロバイダによって「本当」の値によって上書きされるコンテキストに。コンテキストにサブスクライブされたコンポーネントのツリーで、その上に一致するプロバイダーがない場合、このデフォルト値が使用されます。

import React from "react";

const ContainerContext = React.createContext("containerless");

const Container = ({ children }) => {
  return (
    <ContainerContext.Provider value="Container">
      <div>
        <h1>Container</h1>
        {children}
      </div>
    </ContainerContext.Provider>
  );
};

const Data = ({ children }) => {
  const containerContext = React.useContext(ContainerContext);

  React.useEffect(() => {
    if (containerContext === "containerless") {
      throw new Error("Data Container not contained in Container component");
    }
  });
  return <div>{children}</div>;
};

Container.Data = Data;

export { Container };

アプリ

「item3」データコンテナを出し入れしContainerてテストします。

function App() {
  return (
    <div className="App">
      <Container>
        <Container.Data>item1</Container.Data>
        <Container.Data>item2</Container.Data>
      </Container>
      <Container.Data>item3</Container.Data>
    </div>
  );
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-13

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

React.Jsで別のコンポーネントの子としてコンポーネントを作成します

React.Jsで別のコンポーネントの子としてコンポーネントを作成します

別のコンポーネントのdefaultPropとしてReactコンポーネントを指定します

子として、またはReactコンポーネントのレンダリング関数内からreactコンポーネントを使用します

React.JS-contenteditabledivのコンテンツをReactコンポーネントとして管理します

React：親の子コンポーネントコンポーネントの状態を取得します

Reactを使用して別のコンポーネントからコンポーネントに追加する

すべてのreact子コンポーネントを更新します

Reactはどのようにして子コンポーネントを再利用しますか/親コンポーネントを再レンダリングするときに子コンポーネントの状態を維持しますか？

Reactを使用して、別のコンポーネントの定義内にコンポーネントを定義することは可能ですか？

あるコンポーネントの状態を別のコンポーネントで使用する方法は？独立したコンポーネント（React）

JSONの要素ごとにReactコンポーネントを作成します

React：関数を小道具として子コンポーネントに渡し、子コンポーネントでonClickを呼び出します

React動的にコンポーネントをダウンロードし、すべての子コンポーネントからデータを取得します

React-onClickで子コンポーネントの動的リストを作成します

react Linkでparamsを使用して、別のコンポーネントでその値を取得しますか？

別のコンポーネントの子の状態がreactで変更されたときにイベントをトリガーします

Reactコンポーネントをパラメーターとして別のReactコンポーネントに渡す

コンテナーコンポーネントの関数間で引数としてReactコンポーネントを渡すことは可能ですか？

コンテナーコンポーネントの関数間で引数としてReactコンポーネントを渡すことは可能ですか？

コンテナーコンポーネントの関数間で引数としてReactコンポーネントを渡すことは可能ですか？

別のコンポーネントを小道具として受け入れるReactコンポーネント、およびそのコンポーネントのすべての小道具を入力するにはどうすればよいですか？

ボタンをクリックすると、Reactコンポーネントを別のコンポーネントに追加します

React：列コンポーネントをテーブルの行コンポーネントとしてレンダリングします

Reactコメントコンポーネント-リストに新しく追加されたコメントコンポーネントをターゲットにして、このコンポーネントのみで関数を実行します

formikを使用してReactで1つのコンポーネントから別のコンポーネントにデータを渡す

React - JSX コンポーネントの配列を作成するとき、オブジェクトは React の子として無効です

Reactの子コンポーネントに関数を渡します

TypeScriptを使用してReactの高次コンポーネントを作成する

Reactの親コンポーネントと子コンポーネントでuseEffectを実行する正しい順序は何ですか？

React JSで特定のキーを使用して子コンポーネントをクリックすると、親コンポーネントの状態が変更されます