So übergeben Sie den Status von der übergeordneten Komponente an die untergeordnete Komponente in der Route (react-route-dom) reactjs

Question

Ich bin neu bei React.js und habe eine kleine React-Anwendung mit react-router-dom erstellt. In dem habe ich zwei Komponenten:

1. Dashboard (dashboard.js)
2. Information (information.js)

und eine Hauptkomponente App (App.js), in dem ich verwende die react-router-dom.

Ich kann Requisiten von App-Komponente zu Dashboard und Informationen senden, aber ich möchte Status senden. Kann mir jemand helfen? Wie kann ich den Status von der Elternkomponente zur Kinderkomponente senden?

Answer 1

In Stammkomponente Sie Requisiten wie diese

<child prop1 = {this.state.stateName} /> 

Answer 2

Mit oben Antwort senden können ich vollständigen Code bin Entsendung, so dass weitere Nutzer diese verstehen können.

App.js

class App extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = {open: false}; 
    this.state = {message: "StackOverflow"}; 
    } 

return (
     <Router> 
      <div> 
      <AppBar title="App" onLeftIconButtonTouchTap={this.handleToggle} /> 

      <Drawer containerStyle={{height: 'calc(100% - 64px)', top: 64}} docked={true} width={200} open={this.state.open} zDepth={2}> 
       <Link to="/dashboard" style={{ textDecoration: 'none' }}><MenuItem>Dashboard</MenuItem></Link> 
       <Link to="/information" style={{ textDecoration: 'none' }}><MenuItem>Information</MenuItem></Link> 
      </Drawer> 

      <Route exact path="/dashboard" render={props => <Dashboard someProp={this.state.message} {...props} />} /> 
      <Route exact path="/information" render={props => <Information someProp={this.state.message} {...props} />} /> 
      </div> 
     </Router> 
    ); 
} 

Dashboard.js

import React from 'react'; 


class Dashboard extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    console.log(this.props); 
    const {styleFromProps} = this.props; 
    const contentStyle = { ...styleFromProps, transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)' }; 

    return (
      <div style={contentStyle}><h1> Hello {this.props.someProp}</h1></div> 
    ); 
    } 
} 

export default Dashboard;