Question

我只是学习反应，我尝试使用Bootstrap建立一个网站。假设下面的图片是我的网页。当我浏览路径为“ / project / react”的链接时，在左上角（导航栏标题的值为“ React”），然后浏览路径为“ / project / bootstrap”的链接，我希望其左上角（值为导航栏的标题为“ Bootstrap”。那可能吗？因为我得到的标题仍然显示为“ React”。谢谢

//MyPage.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap.css';
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import MyNavbar from '../components/MyNavbar';
import MyReact from '../components/MyReact';
import MyBootstrap from '../components/MyBootstrap';

let pgName = "My Page"
class MyPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageName: pgName
    };
  }

  setPageName = (pageName) => {
    pgName = pageName;
  }

  componentDidMount(){
    this.setState({ pageName: pgName });
  }

  render() {
    return (
      <div>
        <MyNavbar pageTitle={this.state.pageName}/>
        <Switch>
          <Route path="/project/bootstrap" component={MyBootstrap} render={this.setPageName("Bootstrap")}/>
          <Route path="/project/react" component={MyReact} render={this.setPageName("React")}/>
        </Switch>
      </div>
    )
  }
};

export default ProjectPage;


//MyNavbar.js
import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Scrollchor from 'react-scrollchor';

class MyNavbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pageTitle: props.pageTitle
    };
  }

  componentWillReceiveProps(props,state){
    this.setState({ pageTitle: props.pageTitle });
  }

  render() {
    return (
      <Navbar bg="dark " expand="lg" fixed="top">
        <Navbar.Brand href="#home" className="menu-title">{this.state.projectTitle}</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" position="absolute" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ml-auto" >
            <Scrollchor to="#docs" animate={{ offset: -90, duration: 300 }} className="nav-link">Docs</Scrollchor>
            <Scrollchor to="#tutorial" animate={{ offset: -90, duration: 300 }} className="nav-link">Tutorial</Scrollchor>
            <Scrollchor to="#blog" animate={{ offset: -90, duration: 300 }} className="nav-link">Blog</Scrollchor>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default MyNavbar;


//MyReact.js
import Container from 'react-bootstrap/Container';
import React from 'react';

class MyReact extends React.Component {
  render() {
    return (
      <h1>React</h1>
    );
  }
}

export default MyReact;


//MyBootstrap.js
import Container from 'react-bootstrap/Container';
import React from 'react';

class MyBootstrap extends React.Component {
  render() {
    return (
      <h1>Bootstrap</h1>
    );
  }
}

export default MyBootstrap;

this case

Answer 1

为什么在渲染道具中调用setPageName？根据反应文档，渲染道具是组件用来了解要渲染什么的功能道具。在这种情况下，无需使用渲染道具，只需要一个onClick函数，因为您只想更改先前渲染的导航栏的标题。第二，请记住在setPageName函数中添加setState，除非DOM不知道状态更改或相应的道具都没有。然后，当您更改pageName状态时，导航栏道具将对此更改做出反应。

<Route path="/project/react" component={MyReact}  onClick={() => setPageName (someValue)} />

setPageName = (newPageName) =>{ setState({pageName : newPageName }) }

希望它将对您有帮助

Answer 2

您可以这样做。

将回调作为道具传递给组件

 $productImageId = session()->get('imageId');

        $productImage = ProductImage::find($productImageId);

        $productImage->update([
            'model_id' => $id
        ]);

session()->forget('imageId');

在安装组件时调用回调

<Route
  path="/project/bootstrap"
  render={(props) => <MyBootstrap {...props} isAuthed={true} setPageName={this.setPageName.bind(this)} />}
/>

Answer 3

这可能不正确且未经测试，但是您尝试过吗？：

     <Route path="/project/bootstrap" component={MyBootstrap} render={() => this.setPageName("Bootstrap")}/>
      <Route path="/project/react" component={MyReact} render={() => this.setPageName("React")}/>

我认为这更有可能起作用，这样您的setPageName函数只能在渲染器上运行。

如何在反应中更改导航栏标题的值？

3 个答案: