React の描画内容を Decorator でラッピングしてみる！
React 書いてますか？
最近私は Vue の方がお好みですが、
やっぱり複雑な事をしようと思うと、
JavaScript を直接拡張しているような React の書き味はなんとも心地よいものですね。
で、先日 React を書いていたのですが、
Nuxt の layout プロパティのように、メニューなどの共通で使う部品を外部から差し込みたいなと思いまして。
TypeScript で書いていたので、 Decorator で書けば良いじゃん！
ということでやってみた記録です。
Decorator でコンテンツラッパーを作る
やりたいこと
やりたいことはこれ。
const menu: FC = ({ children }) =＞ (
＜div＞
＜ul＞
＜li＞項目1＜/li＞
＜/ul＞
{ children }
＜/div＞
);
const main: FC = () =＞ (
＜Menu＞
＜p＞main contents＜/p＞
＜/Menu＞
);
こうすると、main が menu の children で展開されるので、
メインコンテンツにメニューをくっつけて表示することができますね。
ただ、これだとメニューの中にメインコンテンツがあるみたいな DOM 構成になって
ちょっと気持ち悪い感じ。
ということで、この menu を、デコレーターでどうにかくっつけたいと言うのが今回のお気持ち。
デコレーターで書き直した Ver
さっきは省略しましたけど、とりあえず HTML 側にこんな感じのタグが用意されている想定をして。
＜div id=”app”＞＜/div＞
実際のコードはこちら。
@menu
class App extends React.Component {
render() {
return (
＜h1＞
main
＜/h1＞
);
}
}
ReactDOM.render(＜App /＞, document.getElementById(’app’));
function menu(target, name) {
const originalRender = target.prototype.render;
target.prototype.render = function() {
return (
＜div＞
＜ul＞
＜li＞項目1＜/li＞
＜/ul＞
{ originalRender() }
＜/div＞
);
};
}
menu 関数みてもらったら、とってもシンプルに作れることが分かりますね。
元々の render の内容は target.prototype.render に入ってくるので、
一旦それを originalRender 変数に待避させ、
target.prototype.render に新しく描画する内容を上書きしています。
元々の内容を originalRender に入れてあるので、
menu で元の内容を描画させたいところに { originalRender() } を置いておけば
そこに元々の内容が展開されますね。
とっても簡単。
Functional Component の場合どうするの？
実はデコレーターを使った Ver に書き直したときに、
しれっと元の方を class を使った Component に差し替えてました。
元のコードではどちらも Functional Component をつかってたはず…
では Functional Component にも対応できるようにデコレーターを書き直そう！となるのですが、
残念なことに、
@menu const app = () =＞ ( ＜h1＞App＜/h1＞ );
みたいな、単純な変数にデコレーターはつけられないのです。
（クラスの中のプロパティならできるのですけどね。）
ということで、ここで HOC (Higher-order Component) に頼りましょう。
HOC で書き直す
とはいっても、結局やることはほぼ一緒で、クラスの場合は先ほどのようにデコレーターも使えます。
単純に、デコレーター内で関数を展開して render を走らせていたものを、
新しい render を含む Component を返すようにしてあげたらいいだけです。
ということで。
export menu function (TargetComponent: any) {
return class Menu extends Component＜any, any＞ {
render() {
return (
＜div＞
＜Menu /＞
＜TargetComponent {...this.props}/＞
＜/div＞
);
}
}
};
こんな感じに。
実際に使うときは、
const dashboard: FC＜HelloProps＞ = () =＞ (
＜h1＞
Hello!
＜/h1＞
);
export default menu(dashboard);
こんな感じで、 Functional Component を HOC でラップしてあげたら OK です。
ちなみに、先ほど同様
@menu
class App extends React.Component {
...
みたいな使い方をしても、同じように動くようになっています。
（処理を追いかけてみたら、やっていることは同じであることが分かります！）
レイアウトのような、使い回せる部品は HOC に出すことを検討しよう！
以外に難しそうで、単純に関数をラッピングしてあげるだけなので
分かってしまえば簡単ですね。
HOC はちょっと手を出しづらい記法ですが、一度慣れるととても便利なものなので、
是非こういう簡単なところからつかっていってみたいですね。
