反応成分のスタイルプロパティ

Question

私は、繰り返されている成分があり、その理由はアイコン、色、テキストのためです。私が試した

<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 

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 

は、私が使用私のコンポーネントは次のようになりますように、コンポーネント上で、これらのプロパティを作るための方法があったかどうかを確認したかったです

Answer 1

ほとんどの場合、TabOneの引数としてpropsを渡すだけです（わかりやすくするためにマークアップを簡略化します）。

---

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

export default TabOne; 

、機能性成分関数に引数としてその親から渡されたプロパティを取得してください。