ThisComponentとThatComponentの2つのコンポーネントがあるとしましょう。これらのコンポーネント内で、3番目のコンポーネントACoolThirdComponentをレンダリングします。私が達成しようとしているのは、ThisComponentまたはThatComponentのどちらでACoolThirdComponentを使用するかに応じて、divのクラスを設定することです。
これは可能ですか？
ThisComponent
export const ThisComponent = () => {
return (
<ACoolThirdComponent/>
)
}
ThatComponent
export const ThatComponent = () => {
return (
<AThirdCoolComponent/>
)
}
次に、最後の3番目のACoolThirdComponent
export const ACoolThirdComponent = () => {
/* Psuedo code */
if this component is used-in/called from ThisComponent set a class "this-cool-class"
if this component is used-in/called from ThatComponent set a class "that-awesome-class"
return (
<div className={aNiceDynamicClassBasedOnTheAbove}></div>
)
}
小道具を渡してみて、検出できるようにします。
export const ACoolThirdComponent = ({ className }) => {
return (
<div className={className}></div>
)
}
したがって、それを呼び出すときに、必要なclassNameを彼に渡すことができます。
export const ThatComponent = () => {
return (
<AThirdCoolComponent className="whatever"/>
)
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加