Реагировать CSS Оформление печатных внутренних компонентов

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 свойства. Здесь я вижу следующие варианты:

1. Создайте обертку div для компонента Logo и добавьте этот класс в оболочку. Что касается меня, это не изящный способ, потому что он создает много ненужных div.
2. Добавить логику в компонент Logo, который будет обрабатывать свойство className и добавлять все внешние классы в корневой div внутри компонента. Это также уродливо, потому что я должен добавить эту логику шаблона каждый раз, когда хочу компоновать компонент внутри некоторого другого компонента.

Что такое реагирующий подход для решения таких проблем?

Answer 1

Да, вы не можете предоставить атрибут 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> 
     ); 
    } 
}); 

Дайте мне знать, если это то, что вы хотели знать или что-то еще.