Reactで高階コンポーネントを使う：propsでコンポーネントに機能を追加

2024-04-02

Reactコンポーネントをpropsとして渡す方法

方法

コンポーネントを直接渡す

最も簡単な方法は、渡したいコンポーネントを直接propsとして渡す方法です。

const MyComponent = () => {
  return <h1>Hello World!</h1>;
};

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

このコードでは、MyComponentをAppコンポーネントのchildrenpropsとして渡しています。

React.createElementを使って、コンポーネントとそのpropsを動的に生成することもできます。

const App = () => {
  const component = React.createElement(MyComponent, {
    name: "John Doe",
  });

  return (
    <div>
      {component}
    </div>
  );
};

このコードでは、MyComponentコンポーネントとnamepropsを動的に生成し、Appコンポーネントでレンダリングしています。

高階コンポーネントを使って、コンポーネントにpropsをラップすることもできます。

const withProps = (Component) => (props) => {
  return <Component {...props} />;
};

const MyComponent = () => {
  return <h1>Hello World!</h1>;
};

const App = () => {
  const MyComponentWithProps = withProps(MyComponent);

  return (
    <div>
      <MyComponentWithProps name="John Doe" />
    </div>
  );
};

このコードでは、withProps高階コンポーネントを使って、MyComponentコンポーネントにnamepropsをラップしています。

Reactコンポーネントをpropsとして渡す方法はいくつかあります。どの方法を使うかは、状況によって異なります。

コンポーネントを直接渡す

const MyComponent = () => {
  return <h1>Hello World!</h1>;
};

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

React.createElementを使う

const MyComponent = ({ name }) => {
  return <h1>Hello {name}!</h1>;
};

const App = () => {
  const component = React.createElement(MyComponent, {
    name: "John Doe",
  });

  return (
    <div>
      {component}
    </div>
  );
};

高階コンポーネントを使う

const withProps = (Component) => (props) => {
  return <Component {...props} />;
};

const MyComponent = () => {
  return <h1>Hello World!</h1>;
};

const App = () => {
  const MyComponentWithProps = withProps(MyComponent);

  return (
    <div>
      <MyComponentWithProps name="John Doe" />
    </div>
  );
};

propsの型チェック

TypeScriptを使っている場合は、React.ComponentTypeやReact.FCを使って、propsの型チェックを行うことができます。

const MyComponent: React.FC<{ name: string }> = ({ name }) => {
  return <h1>Hello {name}!</h1>;
};

const App: React.FC = () => {
  return (
    <div>
      <MyComponent name="John Doe" />
    </div>
  );
};

デフォルトprops

コンポーネントにデフォルトpropsを設定することもできます。

const MyComponent = ({ name = "John Doe" }) => {
  return <h1>Hello {name}!</h1>;
};

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

Reactコンポーネントをpropsとして渡すその他の方法

React.forwardRefを使って、コンポーネントにrefを渡すことができます。

const MyComponent = React.forwardRef((props, ref) => {
  return <h1>Hello World!</h1>;
});

const App = () => {
  const ref = React.createRef();

  return (
    <div>
      <MyComponent ref={ref} />
    </div>
  );
};

Contextを使って、コンポーネント間でデータを共有することができます。

const MyContext = React.createContext();

const MyComponent = () => {
  const { name } = React.useContext(MyContext);

  return <h1>Hello {name}!</h1>;
};

const App = () => {
  const [name, setName] = React.useState("John Doe");

  return (
    <MyContext.Provider value={{ name, setName }}>
      <div>
        <MyComponent />
      </div>
    </MyContext.Provider>
  );
};

const useMyComponent = () => {
  const [name, setName] = React.useState("John Doe");

  return {
    name,
    setName,
  };
};

const MyComponent = () => {
  const { name, setName } = useMyComponent();

  return <h1>Hello {name}!</h1>;
};

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};