Question

这是父组件：

class App extends Component {

defaultState = {
    test: "hello"
};

constructor(props) {
    super(props);
    this.state = this.defaultState
}

render() {
    return (
    <Router>
            <Switch>
                <Route key="home" path="/" test={this.state.test} component={HomeScreen}/>

            </Switch>
      </Router>
    );
}
}

这是子组件：

class HomeScreen extends Component{

 constructor(props) {
     super(props);
}

render(){
    return(
        <div>


            <p>Hello, Welcome to the app. {this.props.test}</p>
        </div>
    )
}
}

道具test未打印在子组件中。

可能是什么问题？已经持续了很长时间

Answer 1

您可以在

中使用渲染功能

示例：

<Route path="/abc" render={()=><TestWidget num="2" someProp={100}/>}/>

Checkout this doc on render function

您的渲染功能应如下所示：

render() {
    return (
    <Router>
            <Switch>
                <Route key="home" path="/" render={(props) => <HomeScreen test={this.state.test} {...props} />}/>    
            </Switch>
      </Router>
    );
}

反应子组件没有接收道具

1 个答案: