在 React 中重用时如何更改组件的样式？答案

【问题标题】：How to change styles for components while we reusing in react?在 React 中重用时如何更改组件的样式？
【发布时间】：2019-12-07 11:33:54
【问题描述】：

我正在开发 React 项目，因为我有一个父组件是 App.js。对于那个 App.js，Child.js 是子组件。在那个 Child.js 中，我放置了一个图标并应用样式。

现在我想重用具有不同背景颜色、不同图标、不同边框颜色的 Child.js 组件。

如何做到这一点在react中

这是 App.js

import React from 'react';
import './App.css';
import Child from './Child/Child'

function App() {
  return (
    <div className="App">
      <Child></Child>
      <Child></Child>
    </div>
  );
}

export default App;

这是 Child.js

import React from 'react';
import './Child.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

function Child() {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div class="exp">
                        <FontAwesomeIcon className='coffee' icon={faCoffee} />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Child

这是 Child.css

.exp{
    width:80px;
    height:80px;
    background-color:red;
    border-radius:100%;
    line-height:80px;
    text-align:center;
    vertical-align:middle;
    display:inline-block;
    border: solid 3px blue;
}

.coffee {
    color: green;
}

【问题讨论】：

标签： reactjs

【解决方案1】：

你可以在你的css文件中创建多个类，然后传入你想在组件中使用的类名和图标的prop。

<Child iconClass="coffee" icon={faCoffee}/>

function Child(props) {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div class="exp">
                        <FontAwesomeIcon className={props.iconClass} icon={props.icon} />
                    </div>
                </div>
            </div>
        </div>
    )
}

【讨论】：

【解决方案2】：

您可以添加一个icon 属性来在您的子组件中呈现一个 JSX 元素。

function Child({ icon }) {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div class="exp">
                        {icon}
                    </div>
                </div>
            </div>
        </div>
    )
}

然后您可以像这样在父组件中编写您的子组件。

<Child icon={(<FontAwesomeIcon className='coffee' icon={faCoffee} />)} />

【讨论】：

【解决方案3】：

让孩子在渲染组件时接受 props 并传递 props。

function Child({ icon, className}) {
  return (
    <div className='container'>
        <div className='row'>
            <div className='col-12'>
                <div class="exp">
                    <FontAwesomeIcon className={className} icon={icon} />
                </div>
            </div>
        </div>
    </div>
  )
}

export default Child

然后像这样使用它

<Child icon="faCoffee" className="style" />
<Child icon="faBars" className="style" />

【讨论】：