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)

我经历了this，但是没有提及。

Answer 1

尝试一下：

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

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

Answer 2

如果您想使用React Router将数据向下传递到组件，则可以更改Route组件，使其看起来像这样。

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

这是很好的article，它解释了为什么使用render而不是component的原因，但要点在于它是为了提高性能。

Answer 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)

谢谢

喜欢并投票

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

3 个答案: