Question

所以我学习React已有一段时间了，但是成功的关键之一就是传递状态。

我想要做的是将状态从我的App.js传递给通过路由呈现的组件。不幸的是，在MyComponent.js中，我收到错误消息“未定义lang”。

有人可以指导我解决问题吗？这是我到目前为止的内容：

App.js

class App extends Component {

constructor (props) {
    super (props)
    this.state = {
        language: 'en'
    }
}   
render() {
    return (
        <BrowserRouter>
            <div className='App'>
                <Switch>
                    <Route 
                    exact path='/' render={(props) => <MyComponent lang={this.state.language} />}
                    />
                    <Route exact path='/privacy/policy' component={Policy} />
                    <Route path='*' component={NotFound} />
                </Switch>
            </div>
        </BrowserRouter>
    );
} } export default App;

MyComponent.js

export class MyComponent extends Component {

constructor(props) {
    super(props);
    this.state = {
        lang : {lang} 
    }
}
render () {
    return (
        <div className='searchBar'>
            <p>Current language is: {this.state.lang}</p>// HERE COMES THE STATE
        </div>
    );
}}

Answer 1

您正在尝试将props向下传递到MyComponent组件，但是尝试在SearchBar组件中进行渲染。在您的SearchBar的第一条路线中将MyComponent重命名为App.js。

此外，在MyComponent.js中，从lang中删除state属性，然后更改：

<p>Current language is: {this.state.lang}</p>

到

<p>Current language is: {this.props.lang}</p>

错误通过路由将状态从App.js传递到Component.js的REACT中

1 个答案: