将状态从父路由传递到子路由答案

【问题标题】：Passing state from parent to child route将状态从父路由传递到子路由
【发布时间】：2019-08-17 20:05:55
【问题描述】：

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

下面显示的是我的 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)

我通过this，但是里面没有提到这个。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

试试这个：

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

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

【讨论】：

【解决方案2】：

如果您想使用 react 路由器将数据向下传递到组件，您可以将 Route 组件更改为如下所示。

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

这是一个很好的 article 解释为什么使用 render 而不是 component 但它的要点是它是为了性能。

【讨论】：

【解决方案3】：

你可以使用react-router从父组件传递数据，非常简单用这个更新你的代码，你的问题就会得到解决

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 :  [],
      name:'rizwan',
    }
  }

  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} 
                 currentStep={this.state.name} />
            <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)

现在打开您的子组件：“adddata”

和控制台道具

console.log('wao', this.porps)

谢谢，

点赞并投票

【讨论】：