将传递道具反应到儿童边缘案例？

Question

我的应用程序具有以下结构，我想将基于 Header 状态的道具传递给 RT 组件。我可以使用 Context 轻松传递它，但是当 prop 为某个值时我需要调用 API，并且 Context 似乎不是为此用途而设计的，因为它使用了渲染模式。

在 Header.js 中，我使用 this.props.children 渲染孩子。为了传递道具，我尝试了以下模式，但没有任何效果。我在这里缺少一个概念。这是什么？

(1) React.Children.map(children, child =>
      React.cloneElement(child, { doSomething: this.doSomething }));

(2) {React.cloneElement(this.props.children, { loggedIn: this.state.loggedIn })}

(3) <Route
      path="/issues"
      render={({ staticContext, ...props }) => <RT {...props} />}
    />

结构：

App.js

<Header>
  <Main />
</Header>

Main.js

const Main = () => (
  <Grid item xl={10} lg={10}>
    <main>
      <Switch>
        <Route exact path="/" component={RT} />
        <Route path="/projects" component={Projects} />
        <Route path="/issues" component={RT}/>
        <Route path="/notes" component={Notes} />
      </Switch>
    </main>
  </Grid>
);

Answer 1

我个人建议使用 React Context API 来处理用户状态，而不是通过 props 手动传递它。这是我如何使用它的示例：

import React from 'react';

export const UserContext = React.createContext();

export class UserProvider extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: false,
            onLogin: this.login,
            onLogout: this.logout,
        };
    }

    componentWillMount() {
        const user = getCurrentUser(); // pseudo code, fetch the current user session
        this.setState({user})
    }

    render() {
        return (
            <UserContext.Provider value={this.state}>
                {this.props.children}
            </UserContext.Provider>
        )
    }

    login = () => {
        const user = logUserIn(); // pseudo code, log the user in
        this.setState({user})
    }

    logout = () => {
        // handle logout
        this.setState({user: false});
    }
}

然后您可以在任何需要的地方使用 User 上下文，如下所示：

<UserContext.Consumer>
    {({user}) => (
        // do something with the user state
    )}
</UserContext.Consumer>