React css 布局内部组件

Question

假设我有这样的 html 代码：

<header>
  <div class="header__logo logo">
    <img class="logo__img" ...>
    <span class="logo__status"...>
  </div>
</header>

这里

.logo - 是class有样式的，特别是logo组件。
.header-logo - 在 header.

所以在 header 组件内部做出反应，我想要这样的东西：

    <header>
      <Logo className="header__logo" />
    <header/>

但我不能，因为 React 不会自动处理 className 属性。我在这里看到这个选项：

为 Logo 组件创建一个 div 包装器并将此 class 添加到包装器。对于我来说，这不是一种优雅的方式，因为它会产生很多不必要的 divs.
向 Logo 组件添加逻辑，它将处理 className 属性并将所有外部 class 附加到组件内部的根 div。这也很丑陋，因为每次我想在其他组件中布局一个组件时，我都必须添加这个样板逻辑。

解决此类问题的反应方法是什么？

Answer 1

是的，您不能向 React 组件提供 className 属性。如果你想为同一个组件提供自定义 class，你可以提供 className 作为组件的属性，该组件作为 className 添加到子组件中。我相信你需要做这样的事情。

var Header = React.createClass({
    render: function() {
        return (
           <header>
               <Logo customClass="header__logo logo"/>
           </header>
        );
    }
});

var Logo = React.createClass({
    render: function() {
        return (
           <div className={this.props.customClass}>
              <img className="logo__img" />
              <span className="logo__status" ></span>
           </div>
        );
    }
});

让我知道这是你想知道的还是其他的。

React css 布局内部组件

React css layouting inner components

css

layout

reactjs

react-jsx