ReactのHOC（高階コンポーネント）について

Question

あるチュートリアルの中で次のような記述がありました。

(Aux.js)

const aux = props => props.children;

export default aux;

(Person.js)

import React, { Component } from "react";
import Aux from "../../../hoc/Aux";

import classes from "./Person.css";

class Person extends Component {
  render() {
    console.log("[Person.js] rendering...");
    return (
      <Aux>
        <p onClick={this.props.click}>
          I'm {this.props.name} and I am {this.props.age} years old!
        </p>
        <p>{this.props.children}</p>
        <input
          type="text"
          onChange={this.props.changed}
          value={this.props.name}
        />
      </Aux>
    );
  }
}

export default Person;

auxコンポーネントでJSXを囲むことによって、divを作成せずに複数の要素をレンダーできるようになるようです。

これはどういう仕組みなのでしょうか？

親コンポーネントから子コンポーネントにpropsを渡す場合、通常<Hoge hoge={hogehoge}/>のような書き方をすると思うのですが、今回の例では<Aux>hogehoge<Aux>のように子要素が入っているだけです。auxコンポーネントがどのようにpropsを受け取っているのかよく分かりません。

ご教授いただけると幸いです。

Answer 1

auxコンポーネントがどのようにpropsを受け取っているのかよく分かりません。

子要素はchildrenというpropに割り当てられます。

---

なお、

• Auxは高階コンポーネントではなく、単なる関数コンポーネントです。

• 最近のReactでは、標準でReact.Fragmentという、Auxと同じ役割のコンポーネントが用意されています。自作する必要もありません。

Comments

[maskmelon]

childrenは設定しなくても子要素を受け取ることができるんですね。
整理できました。ありがとうございます。