Javascript 在ReactJs中面对传递道具的问题

我很难将道具传递给组件。我希望能够在

componentDidMount

方法中使用该对象。 我当前的设置是我有一个

应用程序

组件，它将一个对象传递给

主

，主将该对象作为道具传递给

可售票组件

这是我的应用程序组件

 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}/>

导出默认类应用程序扩展组件{
构造器（道具）{
超级（道具）；
this.state={
密钥斗篷：空，
认证：假，
用户：{}，角色：“”
}
}
componentDidMount（）{
constkeydove=keydove（'/keydove.json'）；
init（{onLoad:'login required'}）。然后（authenticated=>{
this.setState（{keydrope:keydrope，authenticated:authenticated}）；
//this.state.keydove.loadUserInfo（）.success（user=>this.setState（{user}））；
}).catch（err=>console.log（“ERROR”，err））；
}
render（）{
返回(

这是我的主要组成部分

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}/>}/>

导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
this.state={keydape:'}
}
componentDidMount（）{
console.log（“主道具”，this.PROPS）；
}
}
render（）{
返回(
}/>

我希望能够在我的
TicketTable
组件中使用
keydape
对象

多谢各位。
Ps：我希望能够做到这一点，而不需要使用状态管理框架，如
redux
传递给
TicketTable
组件的
keydape
道具实际上是空的，因为您传递的是
Route
组件的状态作为道具，而不是从获得的道具e> 应用程序

组件

因此，做出这一改变，我认为它应该起作用：

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

}/>

“我希望能够在我的可售票组件中使用keydove对象。您在这样做时遇到了什么具体问题？（除了道具是

keydove

，而不是

keydove

）您似乎正在将道具传递给TicketTable。如果您在TicketTable中使用道具时遇到问题，为什么不向我们显示TicketTable？请使用演示问题的工具更新您的问题，最好是使用堆栈片段的可运行工具（

[]

工具栏按钮）.Stack Snippets支持React，包括JSX；。他/她可能应该去掉

Main

constructor.Agreed中的

this.state={keydape:'}；

。但是由于OP也放入

keydape={this.state.keydape}

，原来的prop，表示spread运算符将被此语句覆盖。因此，OP可能应该完全忽略此语句（这在IMO中更好），并坚持使用

{…props}

道具

和

此。道具

不同。

道具

是创建

可售票的箭头函数中的函数参数（在
渲染
路径上的道具
）.
this.props
是
Main
组件的props。我已经更改了路由并删除了
this.state={keydape:'}
并且我得到了null。在尝试
console.log
之后，在
Main和