了解如何获取父组件的属性

Question

如果这是一个＆＃34; Reacty＆＃34;解决方案，但我需要从子组件中获取父组件的类名，这就是原因。如果你能为这个解决方案提供不同的方法，我会很高兴。

我有以下组件：

• 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继承父类的className，这样我就可以拥有类名：

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

如何从子组件中获取父组件的className？

Answer 1

更多“Reacty”这样做的方法就是使用CSS类和继承。在子组件上设置适当的类（.header, .body），并使用后代选择器对其进行样式设置。所以你会：

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

通过这种方式，您还可以将常用样式应用于页面上的所有.header。