反应子组件未接收道具[重复]

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

proptest不会打印为子组件中的内容。

可能是什么问题？，已经在这个问题上很久了

Answer 1

可以在中使用渲染函数

例子：

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

查看渲染函数的文档

渲染函数应如下所示：

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