反應組件的樣式屬性

Question

我有一個正在重複的組件，其重複的唯一原因是由於圖標，顏色和文本。

import React from 'react'; 
const TabOne =() =>{ 
return (
    <div className="irequest-tabs users"> 
     <span className="tabOne"><i className="fa fa-sitemap navbuttonIcon" aria-hidden="true"></i> 
      <span className="hidden-sm hidden-xs">I want to...</span></span> 
    </div> 
); 
} 
export default TabOne 

我想看看是否有一種方法，使組件的屬性，以便使用時，我的組件看起來像：

<Tab1 color="#fff" icon="fa fa-sitemap" text="I want too..." /> 

我已經試過：

import React from 'react'; 
const TabOne =() =>{ 
return (
    <div style={{color: props.color}} className="irequest-tabs users"> 
     <span className="tabOne"><i className={props.icon} className="navbuttonIcon" aria-hidden="true"></i> 
      <span className="hidden-sm hidden-xs">{props.text}</span></span> 
    </div> 
); 
} 
export default TabOne 

Answer 1

幾乎在那裏，只是通過props作爲TabOne的參數（我會簡化您的標記以提高可讀性）。

---

const TabOne = (props) => { 
    return (
    <div style={{color: props.color}}> 
     <i className={props.icon}></i> 
     <span>{props.text}</span> 
    </div> 
); 
} 

export default TabOne; 

記住，功能組件獲取由其父傳遞作爲參數傳遞給該函數的性質。