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;

请记住，功能组件将其父级传递的属性作为args传递给函数。

反应组分的样式属性

1 个答案: