反应组件的样式属性

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; 

记住，功能组件获取由其父传递作为参数传递给该函数的性质。