反应如何获取父组件的属性[重复]

Question

我不知道这是否是一个“反应”解决方案，但我需要从子组件获取父组件的类名，原因如下。如果你能提供一个不同的方法来解决这个问题，我将不胜感激。

我有以下组成部分：

• 文章标题
• ArticleMeta
• 文章正文
• 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

如何从子组件获取父组件的类名称？

Answer 1

一种更“反应”的方法是只使用CSS类和继承。在子组件上设置适当的类（.header、.body），并使用后代选择器设置其样式。所以你会：

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

例如，通过这种方式，您还可以对页面上的所有.header应用公共样式。