[英]how do i reuse a react component but with different colours?
嗨,我对反应和编码很陌生,所以请在你的解释中给我宝贝。
我在 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;
以下是我使用 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;
一种方法是使用样式,就像您在示例中尝试做的那样。 尝试做这样的事情
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 类作为道具而不是确切的样式对象进行传递。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.