Question

我在react v16.13.1项目中使用react-router-dom v5.2.0，我在使用静态路由将道具从父组件传递给孙组件，而父组件则从父组件（即祖父）接收它。从App.js-> Applayout.js接收道具并发送到-> APIData（最后一条路线）

class AppLayout extends Component{
  constructor(props){
    super(props);
  }
  render(){
    console.log('Applayout'+' '+ this.props.data[1]);
      return(
          <Router>
              <div>
                  <Navbar/>
                  <div className={classes.main}>
                      <Sidebar/>
                      <div className = {classes.pages}>
                          <Route path='/' exact component={Dashboard}/>
                          <Route path='/toolsandutils' exact component={ToolsandUtils}/>
                          <Route path='/failures' component={Failures}/>
                          <Route path='/osshare' component={OSshare}/>
                          <Route path='/employee' component={Employee}/>
                          <Route path='/apidata' render={props=> <APIData data={this.props.data}/>}/>
                      </div>
                  </div>                
              </div>
          </Router>
                         
              
      )
  }
}```

Answer 1

我遇到了同样的问题。我尝试了许多不起作用的不同方法。在路线组件中，我尝试传递的道具是不确定的。

我最近确实更新了我使用的babel版本。因此，这可能与使用较旧的babel版本有关。

使用此结构对我有用：

<Router>
  <Switch>
    <Route
      exact
      path="/admin/clients"
      render={() =>
        <ClientsRoute
          onSaveClient={this.handleSaveClient}
          onActivateExistingClient={this.handleActivateExistingClient}
        />
      }
    />
    <Route
      exact
      path="/admin/clients/:page(\d+)"
      render={() =>
        <ClientsPagedRoute
          onSaveClient={this.handleSaveClient}
          onActivateExistingClient={this.handleActivateExistingClient}
        />
      }
    />
  </Switch>
</Router>

我之前在package.json中有这个

{
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

现在我在package.json中有这个

：

{
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "regenerator-runtime": "^0.13.7"
  }
}

我以前在.babelrc中有此功能：

{
  "presets": ["env", "react"],
  "plugins": ["transform-class-properties", "transform-object-rest-spread"]
}

现在，我在.babelrc中拥有这个：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

React-Router-Dom v5.2，无法从父级收到的道具将道具传递给子组件

1 个答案: