reactjs
React
is_mgmt_dept

Stateless Componentを拡張する方法

Stateless Componentの初期処理などを実装したい場合の方法。
※Higher-Order Componentsを実装する。

import React from 'react';

const Test = props => (
  <div>
    {props.value}
  </div>
);

const TestWrapper = (StatelessComponent) => {
  class TestWrapperComponent extends React.Component {
    componentWillMount() {
      // ここに初期処理を記述する。
      this.props.testAction();
    }
    render() {
      return <StatelessComponent {...this.props} />;
    }
  }
  return TestWrapperComponent;
};

export default TestWrapper(Test);