反應如何獲取父組件的屬性

如果這是一個「Reacty」解決方案，但我需要從子組件獲取父組件的類名，那麼這就是原因。如果你能爲這個解決方案提供一種不同的方法，我會非常感激。反應如何獲取父組件的屬性

我有以下組成部分：

ArticleHeader
ArticleMeta
ArticleBody
ArticleImage
文章

的文章組件目前包括所有其他組件，但我想要改變在。我想我的文章組成是這樣的：

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

而且我希望有人寫類似：

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

我想ArticleImage，ArticleHeader和ArticleBody繼承父類名，所以我可以有類名如：

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

如何從子組件獲取父組件的className？

來源

2016-11-07 Gasim

爲什麼不在你的CSS上做一個簡單的.new-single> .header，.new-single> .image來使它工作。或者通過類名作爲道具 –

@ Semi-Friends我不做CSS嵌套。將類名稱作爲道具傳遞是我的最後手段，因爲對於我來說，這兩個組件都是相互關聯的，所以我想要一個儘可能自動執行此任務的解決方案。 – Gasim

@azium你做了這個解決方案嗎？由於克隆組件，它是否具有性能影響？ – Gasim

這樣做的更多「Reacty」方法就是使用CSS類和繼承。在子組件上設置適當的類（.header, .body），並使用後代選擇器來設置它的樣式。所以，你會：

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

這種方式，您也可以申請一個共同的風格，所有.header S中的頁面上，例如。

來源

2016-11-07 21:21:08 Scimonster

反應如何獲取父組件的屬性

回答

相關問題