Question

我正在设计一个网站，其中三个页面的标题相同。默认情况下，第一页应具有以下组件

标题查询列表

并且单击Header中的按钮时，QueryList组件应更改为FindExpert.js。除了页面的更改外，点击按钮时URL也会发生变化。

Header FindExpert

由于标题存在于两个屏幕中，我不想在每个js文件中反复调用该组件。所以，我在header.js文件中使用了三元运算符，这样我就可以在页。

App.js

import React, { Component } from 'react';
import {BrowserRouter,Route,Router,Switch} from 'react-router-dom';
import {Header} from './Header.js';
import {FindExpert} from './FindExpert.js';

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
            <Switch>
              <Route exact path="/" component={Header} />
            <Route path="/findexpert" component={FindExpert} />
            </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

Header.js

import React, { Component } from 'react';
import {Constants} from './constants.js';
import {QueryList} from './QueryList.js';
import {FindExpert} from './FindExpert.js';

export class Header extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
       ProfileData: {},
             profileImage: "profile-pic.svg",
       isClicked:false

        };
        this.findExpertClicked = this.findExpertClicked.bind(this);
        this.findExpertPage=this.findExpertPage.bind(this)
    }

          findExpertClicked() {
         console.log("Find expert clicked");
         this.setState({
            isClicked:true
         })
     }

     findExpertPage(){
        this.props.history.push('/findexpert');
     }

    render(){
        return( 
            <div>
                <div className="col-md-12 HeaderBar">
                    <div className="HeaderContent">
                    </div>
                </div>
                <div className="ProfileHeader">
                    <div className="profileImageDiv">       
                        <img src={this.state.profileImage} className="profileImageSrc" alt="Alternate"></img>
                    </div>
                    </div>
              <div className="headerButtons">
                  <div className="ExBtnDiv" onClick={this.findExpertClicked}><span className="ExBtn">Find Expert</span></div>
              </div>   
                </div>
            <div>{(this.state.isClicked===false)?<div><QueryList/></div> :<div>{this.findExpertPage()}</div>}</div>
            </div>
        )
    }
}

在FindExpert.js中，假设我有一个简单的Hello世界。

import React, { Component } from 'react';
import {Header} from './Header.js';
import {Constants} from './constants.js';

export class FindExpert extends React.Component{

    render(){
        return( 
            <div>       
               Hello world
            </div>
        )
    }
}

通过上面的代码，QueryList按预期位于Header下面，但是当点击find expert按钮时，整个页面会发生变化。

由于我不想在两个文件中调用header.js，有没有办法让标题保持不变并更改其下面的内容，以及在单击find expert按钮时更改url。

Answer 1

您必须为Header创建单独的组件，并在主页上显示内容。并直接在App.js

中呈现Header组件

这样，Header组件将始终呈现，只有页面内容会根据当前路径而改变。

例如：

import React, { Component } from 'react';
import {BrowserRouter,Route,Router,Switch} from 'react-router-dom';
import {Header} from './Header.js';
import HomePage from './HomePage.js';
import {FindExpert} from './FindExpert.js';

class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <BrowserRouter>
            <Switch>
              <Route exact path="/" component={HomePage} />
              <Route path="/findexpert" component={FindExpert} />
            </Switch>
        </BrowserRouter>
     </div>
    );
  }
}

export default App;

在半页

1 个答案: