对子组件不接收道具做出反应 [英] react Child component not receiving props

问题描述

这是父组件:

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的打印方式与子组件中不同.

The prop test is not printed as in the child component.

可能是个问题吗?，问题已经存在很长时间了

What could be the issue?, have been on this for long

推荐答案

您可以在

示例:

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

在渲染功能上签出此文档

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

Your render function should look like this:

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

这篇关于对子组件不接收道具做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！