从父级到子级路由的传递状态

Question

我是新来的响应者，我正在尝试将数据从父组件“仪表板”发送到子组件“ AddData”。我知道正常执行此操作的语法，但是当孩子通过Route连接到父级时，执行此操作的语法是什么？

下面显示的是我的Dashboard.jsx：

import {withStyles} from '@material-ui/core'
import CssBaseline  from '@material-ui/core/CssBaseline'
import PropTypes    from 'prop-types'
import * as React   from 'react'
import {Route}      from 'react-router-dom'
import {Home}       from './scenes/home'
import {A}        from './scenes/a'
import {B}        from './scenes/b'
import {AddData}   from '../adddata'
import {VisualizeData} from '../visualizedata'
import {Header}     from './components/header'
import {Sidebar}    from './components/sidebar'
import styles       from './Dashboard.styles'

class Dashboard extends React.Component {

  constructor() {
    super();

    this.state = {
      trainPercentageDashboard : "null",
      featuresDashboard : [],
      labelsDashboard :  [],
    }
  }

  render() {
    const {classes} = this.props
    console.log(window.location.href);
    var url_ = new URL(window.location.href);
    console.log(url_);
    return (

        <div className={classes.root}>
          <CssBaseline/>
          {url_.pathname !== '/neuralnet' &&
              <Header/>
          }
          <Sidebar/>
          <main className={classes.content}>
            {url_.pathname !== '/neuralnet' &&
                <div className={classes.toolbar}/>
            }
            <Route path="/adddata" component={AddData}/>
            <Route exact path="/visualize" component={VisualizeData} />
            <Route exact path='/home' component={Home}/>
            <Route exact path='/neuralnet' component={A}/>
            <Route exact path='/b' component={B}/>
            <Route exact path='/' component={B}/>
          </main>
        </div>
    )
  }

}

Dashboard.propTypes = {
  classes: PropTypes.object.isRequired,
  theme  : PropTypes.object.isRequired,
}

export default withStyles(styles, {withTheme: true})(Dashboard)

我经历了此过程，但未在其中提及。

Answer 1

尝试这个：

<Route
  path='/adddata'
  render={(props) => <AddData {...props} someotherprop={someotherprop} />}
/>

请注意，传递的道具也可以是状态的一部分。因此您可以将状态传递为this.state.someotherprop。