Reactjs react组件上的样式属性

我有一个被重复的组件，它被重复的唯一原因是因为图标、颜色和文本

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

从“React”导入React；
const TabOne=（）=>{
返回(
我想。。。
);
}
导出默认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

从“React”导入React；
const TabOne=（）=>{
返回(
{props.text}
);
}
导出默认TabOne

差不多了，只需将

props

作为参数传递给

TabOne

（为了可读性，我将简化您的标记）

---

const TabOne=（道具）=>{
返回(
{props.text}
);
}
导出默认TabOne；

---

请记住，函数组件获取父组件作为参数传递给函数的属性。

什么不起作用？我得到错误“未定义props”和“typeError”

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

export default TabOne;