как мне повторно использовать компонент react, но с разными цветами?

#javascript #reactjs #components #styles

#javascript #reactjs #Компоненты #стили

Вопрос:

Привет, я очень новичок в react и кодировании, поэтому, пожалуйста, объясните мне свои объяснения.

Я создал компонент в 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;

Ниже приведены основные 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;

1. Без добавления библиотеки стилей вы могли бы: добавить prop для передачи стилей или className компоненту Header1 (т.Е. <Header1 style={{ background: 'red' }} /> ), а затем использовать эти стили или className при отображении корневого div в Header1. Другим вариантом было бы иметь набор доступных цветов с выбором того, какой цвет использовать через prop (т. Е. <Header1 color="primary" /> )

2. возможно, я делаю это неправильно, но я добавил style в скобки на странице создания Header1, а затем сделал style={{ color:’red’}} в основном app.js страница, но она не работает:(

Ответ №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-класс в качестве реквизита вместо точного объекта style .