Question

我很难传递道具到组件。我希望能够在componentDidMount方法中使用该对象。我当前的设置是我有一个App组件，该组件将对象向下传递到Main，该对象作为道具传递到TicketTable组件。

这是我的App组件

 export default class App extends Component {


constructor(props) { 
super(props);
this.state= { 
  keycloak: null,
  authenticated: false,
  user : {}, role: ''
 }
}

componentDidMount() {
const keycloak = Keycloak('/keycloak.json');
    keycloak.init({onLoad: 'login-required'}).then(authenticated => {
        this.setState({ keycloak: keycloak, authenticated: authenticated});
        // this.state.keycloak.loadUserInfo().success(user => this.setState({user}));
    }).catch(err=>console.log("ERROR", err));
 }
   render() {
return (

  <div>
      <Main keycloak={this.state.keycloak}/>

这是我的主要组成部分

export default class Main extends Component {
constructor(props){
  super(props);
 this.state={keycloak:''}
}

componentDidMount(){
  console.log("MAIN PROPS",this.props);
}


}
 render() {
     return (
       <div>
        <Switch>
           <Route exact path="/" render={(props)=><TicketTable 
  {...props} keycloak={this.state.keycloak}/>}/>

我希望能够在Keycloak组件中使用TicketTable对象。

谢谢。附言：我希望能够做到这一点，而无需使用诸如redux

之类的状态管理框架

Answer 1

您要传递给keycloak组件的TicketTable道具实际上是空的，因为您要传递Route组件的 state 作为道具，并且不是您从App组件中获得的。

因此请进行更改，我认为它应该起作用：

<Route exact path="/" render={(props)=><TicketTable 
{...props} keycloak={this.props.keycloak}/>}/>

在ReactJs中传递道具面临的问题

1 个答案: