我如何重用反应组件但颜色不同？

Question

您好，我对反应和编码非常陌生，所以请在您的解释中宝贝我。

我在 react 中创建了一个名为 Header1 的组件。我使用道具使用了动态文本，因此每次使用 Header1 组件时都可以更改措辞。我想知道如何为风格做到这一点。我希望一张卡片有粉红色的文字，而另一张卡片有蓝色的文字。请帮忙！并提前谢谢你:)

以下是Header1组件的创建：

import React from 'react';
import WhiteMap from '../img/other/whiteWorld.png';
import HeaderScss from './_Header1.scss'

const header1 = (props, style)=>{
    return   <div className="main--container">
                        <header className="header--container__inside">
                        <section className="header--container__left">
                                <h1>
                                    {props.headerTitle} 
                                    {style.headerTitleS}
                                </h1>
                                <p>
                                    {props.headerDescription} 
                                </p>
                        </section>
                        <section className="header--container__right">
                            <div className="header--pic">
                                <img src={WhiteMap} alt="World map with a circle highlighting Australia"/>
                            </div>
                        </section>
                        </header>
                </div>
};

export default header1;

以下是我两次使用 Header1 组件的主要 App.js 文件：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Navigation1 from './Navigation/Navigation1';
import Header1 from './Header/Header1';
import SaveMoney1 from './SaveMoney/SaveMoney1';
import Airports1 from './Airports/Airports1';
// import SydneyCards1 from './SydneyCards/SydneyCards1';
import ThingsYouShouldKnow1 from './ThingsYouShouldKnow/ThingsYouShouldKnow1';
// import BucketList1 from './BucketlistCards/BucketlistCards1';
// import Footer1 from './Footer/Footer1';
import styles from './appStyles.module.css';







class App extends Component {
  render() {
    return (
      <div className="App">
        <Navigation1 />
        <Header1 headerTitle="Fly to" headerDescription=" Selia."/>
        <SaveMoney1/>
        <Airports1/>
        <Header1 headerTitle="Things you should know" headerDescription ="Based on customer bookings,
        {/* <BucketList1/> */}
        {/* <SydneyCards1/> */}
        {/* <Footer1/> */}
      </div>
    );
}
}
export default App;

 

Answer 1

其中一种方法是使用样式，就像您在示例中尝试做的那样。尝试做这样的事情

const Header = (props) => {
  return <h1 style={props.style}>{props.title}</h1>
}

你会像这样渲染它

const App = () => {
  return (
    <div>
      <Header title="My Header with Blue text" style={{color: "blue"}} />
      <Header title="My Header with Red text" style={{color: "red"}} />
    </div>
  )
}

注意：您可以将 CSS 类作为道具而不是确切的样式对象传递。