親コンポーネントのプロパティを取得する方法に反応します

Question

これは "Reacty"ソリューションではありませんが、子コンポーネントから親コンポーネントのクラス名を取得する必要があります。あなたがこの解決策に別のアプローチを提供できるなら、私は素晴らしいでしょう。

私は、次のコンポーネントがあります。

• ArticleHeader
• ArticleMeta
• ArticleBody
• ArticleImage
• 条

記事のコンポーネントは、現在、他のすべてのコンポーネントが含まれていますが、私をthを変更したいで。私は私の記事のコンポーネントは次のようになりたい：

render() { 
    return (
      <article className={this.props.className}> 
       {this.props.children} 
      </article> 
    ); 
} 

そして、私は誰かが何か書きたい：私はArticleImage、ArticleHeader、およびArticleBodyは親のクラス名を継承したい

<Article className="news-single"> 
     <ArticleImage image="someimage.jpg" /> 
     <ArticleHeader title="Test" /> 
     <ArticleBody> <p>loren ipsum</p> </ArticleBody> 
</Article> 

をので、私は持つことができます

.news-single 
.news-single-header 
.news-single-image 
.news-single-body 

子コンポーネントからどのようにしてクラスコンポーネントのclassNameを取得できますか？

Answer 1

もっと「リアクション」のやり方は、CSSクラスと継承を使うことだけです。子コンポーネントに適切なクラス（.header, .body）を設定し、子孫セレクターを使用してスタイルを設定します。だから、必要があります：

.news-single 
.news-single > .header 
.news-single > .image 
.news-single > .body 

この方法で、あなたはまた、例えば、ページ上のすべての.header秒に共通のスタイルを適用することができます。