javascript - 使用 React 网页中的重复 header

Question

我已经创建了 Home.js 来显示主页，服务作为一个内部组件。 Header.js 可重复用于 Home 和 Service。我已将 header 成功导入服务和主页，但当我返回主页时， header 重复，因为它需要从服务页面中获取一个才能显示在主页中。请帮我解决这个问题。

首页.js

import React, { Component } from 'react';

//Re-usable components
import Header from '../Common/Header';
import Services from '../Common/Services';
import Portfolio from '../Common/Portfolio';
import Timeline from '../Common/Timeline';
import Team from '../Common/Team';
import Contact from '../Pages/Contact';
import Footer from '../Pages/Footer';
// import Client from '../Common/Client';
import img from '../Common/assets/img/bakingcareer.jpg';


class Home extends Component {
    render() {
        return ( 
            <div>
                <Header
                // Add any props you want to modify the header 
                // title = 'WHENEVER I BAKE. BAKE WITH MY HEART'
                subtitle = "LOVE WITH BAKING"
                buttonText = "CHECK OUT SERVICE"
                link = '/services'
                showButton = { true }
                image = { img }
                />

                <Services / >
                <Portfolio / >
                <Timeline / >
                <Team / > 
                { /* <Client /> */ } 
                <Contact / >
                <Footer / >

            </div>



        )
    }
}

export default Home;

服务.js

import React, { Component } from 'react';
import SingleService from './SingleService';

//Re-usable items
import Footer from '../Pages/Footer';
import Contact from '../Pages/Contact';
import Header from '../Common/Header';
import image from './assets/img/baking.jpeg';


const services = [{
        title: 'Birthday',
        description: 'A cake for small birthday party for your kids or just friends',
        icon: 'fa-shopping-cart'
    },

    {
        title: 'Family outing',
        description: 'A perfect cake for any family picnic over the weekend or school break',
        icon: 'fa-laptop'
    },

    {
        title: 'Daily basis',
        description: 'Enjoy a cupcake or just a dozen of macarons ',
        icon: 'fa-lock'
    }
];

class Services extends Component {
    render() {
        return ( 
                <div>
                {/* Adding the header to the Service page but now in the main page header is duplicated*/}
                <Header 
                    // title = 'DAN BAKERY'
                    subtitle = "ALL ABOUT OUR BEAUTIFUL SERVICES"
                    buttonText = "CHECK OUT PRODUCT"
                    link = "/"
                    showButton ={true}
                    image = {image}
                />    

                {/* display the service  */}
                <section className = "page-section" id="services" >
                    <div className = "container" >
                    <div className = "row" >
                    <div className = "col-lg-12 text-center" >
                        <h2 className = "section-heading text-uppercase" > Services < /h2> 
                        <h3 className = "section-subheading text-muted" > Enjoy our lovely cakes! < /h3> 
                    </div > 
                    </div> 
                    <div className = "row text-center" > 
                    {/* map through the array */}
                    {services.map((service, index) => {
                        return <SingleService {...service }
                        key = { index }
                        />
                    })
                    }
                    </div> 
                    </div > 
                </section>


                </div>






        )
    }
}

export default Services;

Header.js

import React, { Component } from 'react';
// import HeaderItem from './HeaderItem';
import { Link } from 'react-router-dom';
import '../css/style.css';




class Header extends Component {
    render() {
        return ( 
            <header className = "masthead" style = {{ backgroundImage: 'url("' + this.props.image + '")' } } >
                <div className = "container" >
                <div className = "intro-text" >
                <div className = "intro-lead-in" > { this.props.title } < /div>  
                <div className = "intro-heading  text-uppercase" > { this.props.subtitle } </div>  
                {this.props.showButton &&
                    <Link className = "btn btn-primary btn-xl text-uppercase js-scroll-trigger" to = { this.props.link }>{ this.props.buttonText }</Link>
                }

                </div>  
                </div >  
            </header>
        )
    }
}

export default Header;

Answer 1

在 Home 和 Services 中使用时，将 noHeader 属性传递给 Services 呈现 Header有条件地:

class Home extends Component {
    render() {
        return ( 
            <div>
                ...    
                <Services noHeader / >
                ...
            </div>

/

class Services extends Component {
    render() {
        return ( 
                <div>
                {/* render header only if "noHeader" is not present */}
                { this.props.noHeader || <Header 
                    // title = 'DAN BAKERY'
                    subtitle = "ALL ABOUT OUR BEAUTIFUL SERVICES"
                    ...
                /> }