Question

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

在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处理用户状态，而不是通过prop手动传递。这是我的用法示例：

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

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

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

对儿童边箱反应合格道具？

1 个答案: