陣營CSS布點內的部件

想象一下，我有這樣的html代碼：陣營CSS布點內的部件

<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屬性。在這裏我看到這個選項：

創建一個div包裝到徽標組件並將此類添加到包裝。至於我這不是一個優雅的方式，因爲它產生了很多不必要的div。
將邏輯添加到Logo組件，該組件將處理className屬性並將所有外部類添加到組件內的根div。這也很醜陋，因爲每次我想在某個其他組件中佈局某個組件時，都必須添加此樣板邏輯。

解決此類問題的反應方法是什麼？

來源

2016-09-25 Максим Шокавин

是的，您無法將className屬性提供給反應組件。如果您想爲同一個組件提供自定義類，則可以將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> 
     ); 
    } 
});

讓我知道這是你想知道的還是別的什麼。

來源

2016-09-27 14:27:37 Arpit

非常感謝您的回答。我在第二個選項中描述了處理自定義className prop。但是我認爲這不是一種美麗的事情，因爲每次我想在某個其他組件中佈局某個組件時，必須添加此樣板邏輯。可能是佈局內部組件的純反應方法。這就是我所要求的。 –

我相信你需要編寫這個樣板邏輯，如果你想重用組件，否則你最終會創建多個子組件。 React目前不會做你現在想要建議的內容。 – Arpit

陣營CSS布點內的部件

回答

相關問題