Question

想象一下，我有这样的HTML代码：

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

这里

.logo - 是具有样式的类，特别适用于徽标组件。
.header-logo - 标题内有样式定位徽标。

因此，在标题组件内部的反应中，我希望有类似的内容：

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

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

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

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

Answer 1

是的，您无法为react Component提供className属性。如果要为同一组件提供自定义类，可以提供className作为组件的prop，该组件在子组件中作为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>
        );
    }
});

请告诉我这是您想要了解的内容。

反应css布局内部组件

1 个答案: