React HOC

readme.md

いろいろ忘れた

HOCの考え方を忘れた。 https://frontarm.com/james-k-nelson/4-ways-pass-children-react-elements/

ラップしたコンポーネントを返すパターン

ChildをParentでラップするだけ。 propsとしてコンポーネントを渡してる。 hooksあるからあれだけど、クラス型とかであれば、ライフサイクル系とかstateをparentに持ってあげたりする。

App

import React from "react";

import Parent from "./Parent";
import Child from "./Child";

export default function App() {
  return <Parent component={Child} />;
}

Parent

import React from "react";

export default function Parent(props) {
  const Component = props.component;

  return (
    <div>
      <h1>Hello</h1>
      {Component && <Component />}
    </div>
  );
}

このとき、props.componentはただの関数。 関数をのような形式で書くことでJSXとしてコンパイルされる。

そして、JSXは、React.createElementにすぎない。

https://ja.reactjs.org/docs/jsx-in-depth.html

JSX とは、つまるところ React.createElement(component, props, ...children) の糖衣構文にすぎません

これをprops.componentとして渡しても問題ない

const child = () => React.createElement(
  'div',
  {className: 'sidebar'}
)

Child

import React from "react";

export default function Child(props) {
  return (
    <div>
      <h1>Child</h1>
    </div>
  );
}

子にpropsを渡したいときは単純。

Parent

import React from "react";

export default function Parent(props) {
  const Component = props.component;

  return (
    <div>
      <h1>Hello</h1>
      {Component && <Component enhancedProps="hello"/>}
    </div>
  );
}

childrenパターン

パターンって書いたけど、propsで渡そうが、childrenとして渡そうがあんまかわらなかった。

App

import React from "react";
import "./styles.css";

import Parent from "./Parent";
import Child from "./Child";

export default function App() {
  return (
    <Parent>
      <Child />
    </Parent>
  );
}

普通はこう書く。

Parent

import React from "react";

export default function Parent(props) {
  return (
    <div>
      <h1>Hello</h1>
      {props.children}
    </div>
  );
}

結局これでもいける。

App

import React from "react";
import "./styles.css";

import Parent from "./Parent";
import Child from "./Child";

export default function App() {
  return <Parent>{Child}</Parent>;
}

import React from "react";

export default function Parent(props) {
  const Component = props.children;

  return (
    <div>
      <h1>Hello</h1>
      <Component enhanced="eeee"/>
    </div>
  );
}

関数を渡しているんであれば、でJSX化 JSXを渡しているんであれば、そのまま使える。

renderProps

趣旨がちょっと違うけど。もう忘れてもいいけど。 JSXを返す関数をpropsとして渡す。

export default function App() {
  return (
    <Parent
      render={(value) => {
        return <div>{value} aaaa</div>;
      }}
    >
      {Child}
    </Parent>
  );
}

import React from "react";

export default function Parent(props) {
  return (
    <div>
      <h1>Hello</h1>
      {props.render("enhanced")}
    </div>
  );
}