問題一覧に戻る
中級Context API
問題70: Provider設定

Context.Providerを使用してコンポーネントツリーに値を提供する方法を学びます。Providerはvalueプロップで値を渡し、子コンポーネントがその値にアクセスできるようにします。複数のProviderをネストして使用することも可能で、内側のProviderが優先されます。状態管理ライブラリの代替として中規模アプリケーションで使用されます。

import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext();

function Profile() {
  // Contextを消費
  const user = (UserContext);
  return <h1>{user.name}</h1>;
}

function App() {
  const [user] = useState({ name: "Taro" });

  return (
    {/* 値を提供 */}
    <UserContext. value={}>
      <Profile />
    </UserContext.>
  );
}

export default App;