リアクションコンポーネントのレイアウトのベストプラクティスと、レイアウトスタイリングをコンポーネント自体に強固に結合する必要があるかどうかを理解したかったのです。リアクションコンポーネントの位置のスタイリングのベストプラクティス
私はアプリケーション内で何度も再利用されるカスタムコンポーネントを持っていますが、私はそれらをページの下に垂直方向に積み重ねたときに、margin-bottom:20px;と表示されますが、私はmargin秒、または緊密コンポーネントに結合された他のレイアウト属性を持っていた場合、水平方向margin-right:20px;
でページ全体にそれは右感じていませんか？私はそれに沿って結合された位置スタイリングを持たずに、コンポーネントで独立してレンダリングできるはずだと思ったでしょうか？
コンポーネントを1つのレイアウトで複数回使用している場合は、もちろん、マージンはコンポーネントの一部ではなく、コンポーネントを含むコンポーネントになります。
希望のマージンを得るには、さまざまな方法を使用できます。たとえば、それを定義するcssグリッドギャップがあります。
ただし、flexを使用している場合は、目的のマージンをコンポーネントに渡す必要があります。だから、コンポーネント内にこのようなものを持つことは、その場合には参考になる：
<div id="container" style={[styles.container, this.props.margin]}>
まだ別のに使用したときの小道具を通じて動的な値を渡すために自分自身を可能にしながら、あなたはそれをコンテナのスタイルのデフォルトのマージンを与えることができますこの方法場所。
タイプ propのように、コンポーネントのタイプを定義する小道具があります。また、受け取ったタイプのプロップに基づいて、デフォルトのタイプでクラスを適用することができます。
<div className={styles[this.props.type]}>content</div>
それともあなたは自分のコンポーネントの外観、単一の方法を持っているとclassNameの小道具を追加し、および/または単にインラインスタイルとして、カスタムスタイルを渡すことができます。
static propTypes = { type: PropTypes.oneOf(['info', 'warning', 'error']) };
default propTypes = { type: 'info' };
とレンダリングは次のようになります。
<MyComponent style={{ marginBottom: '30px' }} className="CustomStyleInClass" type="error" />
いずれか1つ、2つ、またはすべてを使用できます。コンポーネントと柔軟性に依存します。
スタイル小道具はオブジェクトの配列を持つことができるので、lodashを使用するのは少し不必要です。 'style = {[styles.container、this.props.margin]}' – bennygenel
ああああ。正しいものは左のものを上書きしますか？クール – ThatBrianDude
CSSルールが適用されます。 CSSルールで同じ小道具を複数回使用した場合は、後で適用されます。これにより、コンポーネントスタイル用のデフォルトの小道具があり、必要に応じてそれらを上書きすることができます。 – bennygenel