javascript - 我如何重用不同颜色的 react 组件？

Question

您好，我对 react 和编码很陌生，所以请在您的解释中对我进行指导。

我在 React 中创建了一个名为 Header1 的组件。我使用了使用 props 的动态文本，因此每次使用 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;

以下是主 App.js 文件，我在其中使用了 Header1 组件两次:

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 类作为 prop，而不是确切的样式对象。