web-dev-qa-db-ja.com

Reactコンポーネントを複数のHOCラッパーでエクスポートしますか？

スタイル付きテキストを表示するReactコンポーネントがあります。ネットワークリソースをロードし、WebSocket入力をリッスンし、通知を表示します。これを行うには、高次コンポーネントを作成しますこれらの各ラッパー関数：withResource、withSocket、およびwithNotifications。

コンポーネントをエクスポートするとき、これは正しいですか？

class TextComponent extends React.Component {
  ...
}

export default withResource(withSocket(withNotifications(TextComponent)))
javascriptreactjshigher-order-components
15
superhawk610

redux または recompose からcomposeを使用できます。例えば：

Redux

import { compose } from 'redux'

export default compose(
  withResource,
  withSocket,
  withNotifications
)(TextComponent)

再構成

import { compose } from 'recompose'

export default compose(
  withResource,
  withSocket,
  withNotifications
)(TextComponent)
34
mersocarlin