时间戳

首页 > 解决方案 > 在我们重用 react 时如何更改组件的样式？

reactjs - 在我们重用 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;
}

标签： reactjs

解决方案

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

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

然后，您可以在 Parent 组件中像这样编写您的 Children 组件。

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

推荐阅读