index.js（入口点）

Question

我有一个状态＆＃39; isLoggedIn＆＃39;在App Component中。

现在，我希望将此状态作为道具传递给子组件＆＃39;秘密组件＆＃39;。

<BrowserRouter>
    <App>
        <Switch>
            <Route path='/secret' component={Secret} />
            <Route path='/' component={Top} />
        </Switch>
    </App>

</BrowserRouter>

但是，我正在使用这样的react-router（ver4.1），并且无法弄清楚如何将App Component的状态作为道具传递给其子组件。

 const childrenWithProps = React.Children.map(this.props.children, (child) => {
            console.log(child);
            }
        );

我知道，通过这样做，我可以访问this.props.children并为它们设置额外的道具但是因为我用Router Component包装我的组件，App Component的子节点现在是Route组件，这使得它很复杂......

有人可以告诉我该怎么做吗？

如果我在如何使用react-router方面做错了，我也很担心。

谢谢！

index.js（入口点）

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import App from './components/App';
import Secret from './components/Secret';
import Top from './components/Top';

ReactDOM.render(
    <BrowserRouter>
        <App>
            <Switch>
                <Route path='/secret' component={Secret} />
                <Route path='/' component={Top} />
            </Switch>
        </App>

    </BrowserRouter>
    ,
    document.querySelector('.container')
);

App.js

import React, { Component } from 'react';

import NavigationMenu from './NavigationMenu';

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false
        };
        this.toggleAuthenticationStatus = this.toggleAuthenticationStatus.bind(this);
    }


    toggleAuthenticationStatus() {
        this.setState({
            isLoggedIn: !this.state.isLoggedIn
        });
    }


    render() {

        //I want to pass this.state.isLoggedIn as props to Secret Component!!!

        const childrenWithProps = React.Children.map(this.props.children, (child) => {
            console.log(child);
            }
        );

        return (
            <div>
                <NavigationMenu isLoggedIn={this.state.isLoggedIn} toggleAuthenticationStatus={this.toggleAuthenticationStatus} />
                {this.props.children}
            </div>
        )
    }
}

Secret.js

import React, { Component } from 'react';

class Secret extends Component {

    constructor(props) {
        super(props);
    }


    componentWillMount() {
        if (this.props.isLoggedIn === false) {
            this.props.history.push('/');
        }
    }

    componentWillUpdate() {
        if (this.props.isLoggedIn === false) {
            this.props.history.push('/');
        }
    }

    render() {
        return (
            <div>
                This content is only for our members!
            </div>
        )
    }
}

export default Secret;

Answer 1

在react-router v4中，推荐的方法是将嵌套路由放在父组件中，而不是将它们作为子组件传递（参见the basic example of react-router v4）。因此，在您的情况下，我建议您只使用Switch组件替换{this.props.children}和路由，并停止将它们作为App的子项传递。然后你可以使用Route的render方法像往常一样将props传递给Secret组件。

return (
  <div>
    <NavigationMenu isLoggedIn={this.state.isLoggedIn} toggleAuthenticationStatus={this.toggleAuthenticationStatus} />
    <Switch>
      <Route path='/secret' render={() => <Secret isLoggedIn={this.state.isLoggedIn}/>)} />
      <Route path='/' component={Top} />
    </Switch>
  </div>
)

如何将道具传递给＆＃39; this.props.children＆＃39;什么时候使用react-router？

index.js（入口点）

App.js

Secret.js

1 个答案: