0
は今しばらくの間、（実際にはClojureScriptラッパー試薬）と反応使用した後、私はまだ次のような問題を解決するための最良の方法だかわからないんだけど：反応中のコンポーネントデザイン、 'フルハイト'を入れる場所
を使用すると、ルート要素を持っているだろうと言う：
class Root extends React.Component {
render() {
return (
<div style="display: flex">
<div style="flex: 2 1">
<Content></Content>
</div>
<div style="flex: 1 1">
<Menu></Menu>
</div>
</div>
);
}
}
これは、画面を垂直方向に大きなコンテンツセクションと小さなメニューセクションに分割します。私は、この分離は明らかにRootコンポーネントが処理すべきものであると言います。 Flexコンポーネントが意味をなさない別のコンテキストでMenuコンポーネント自体が使用される可能性があります。
class Menu extends React.Component {
render() {
return (
<div style="background-color: red">
Buttons, etc...
</div>
);
}
メニューには、そこにはっきりと属しているいくつかのプロパティがあります。例えば、背景色などです。しかし、この例を実行すると、背景色がルートコンポーネントで定義された「メニュー」領域を満たしていないことがわかります。これは、高さ/幅=「100％」スタイルのプロパティが不足しているためです。
私はそれを解決するには2つの方法があります。メニューコンポーネントの中に入れてください。しかし、これはコンポーネントの他の用途では意図されていないかもしれません。誰かがそれを完全な高さではないメニューを使用したい場合は、再度ラップする必要があります。 または、コンポーネントに小道具として幅と高さを渡します。これはかなりオーバーヘッドです。
通常、メニューはそれほど再利用されませんが、このパターンは他の多くの状況で発生します。ここに行く方法は何ですか？これを行うには3番目の方法がありますか？
EDIT /注：
たぶんtransferPropsToは私が必要なものですが、私はまだ議論にこれを残したい...