Question

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

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

如何做到这一点在反应中

这是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;
}

Answer 1

您可以在css文件中创建多个类，然后传入要在组件中使用的类名和图标的属性。

<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>
    )
}

Answer 2

在渲染组件时，让孩子接受道具并传递道具。

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" />

Answer 3

您可以添加一个icon道具来在您的Child组件中呈现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} />)} />

在我们重复使用React时如何更改组件的样式？

3 个答案: