Question

我的应用程序目前有三个组件，用户可以查看用户的个人资料，用户可以查看自己的信息中心，通知和设置以及登录页面。

User和Self共享通用组件Nav和Side，其中User将传递self对象并从redux调用fetchUser操作到Nav和Side，而Self将传递用户和self对象以及调用fetchSelf操作。 / p>

user.js的

class User extends React.Component {
    componentDidMount() {
        this.props.fetchUser(this.props.username);
    }

    render() {

        const { page, self, user } = this.props

        return (
            <main>

                <Nav 
                    self={self} 
                />

                <Side  
                    page={page} user={user} 
                />

                <div>
                     .....
                </div>

            </main>
        )
    }
}

const mapStateToProps = state => ({
    page: state.store.page,
    self: state.store.self
});

export default connect(mapStateToProps, {fetchUser})(User);

Self.js

class Self extends React.Component {
    componentDidMount() {
        this.props.fetchSelf();
    }

    render() {

        const { page, self } = this.props

        return (
            <main>

                <Nav 
                    self={self} 
                />

                <Side  
                    page={page} self={self} 
                />

                {
                    tab === 'Dashboard'
                    ? <Dashboard />
                    : tab === 'Notifications'
                        ? <Notifications />
                        : tab === 'Settings'
                            ? <Settings />
                            : null
                }

            </main>
        )
    }
}

const mapStateToProps = state => ({
    page: state.store.page,
    self: state.store.self
});

export default connect(mapStateToProps, {fetchSelf})(Self);

Login.js

class Login extends React.Component {
    .....

    handleChange = event => {
        .....
    }


    render() {

        return (
            <div id="login">
                .....
            </div>
    )
}

Side.js

const Side = (props) => {

    const { page, self, user } = props;

    return (

        <aside>
        {
            page === 'user'

            ?   <div>
                    <img src={'img/' + user.profile.avatar} alt={`${user.username}'s avatar`} />
            </div>

            :   <div>
                    <img src={'img/' + self.profile.avatar} alt={`${self.username}'s avatar`} />
                <div>   
        }
        </aside>
    )
}

我想在这里做的不是像这样使用react-router

<BrowserRouter>
    <Switch>
        <Route path="/login" exact={true} component={Login} />  
        <Route path="/self" exact={true} component={Self} />    
        <Route path="/:username" component={User} />  
    </Switch>
</BrowserRouter>

我希望能够做这样的事情

const LayoutForLoginAndSignup = (props) => {
    return (
        <div class="loginOrSignUp">
            <ComponentToBePassedIn />
        </div>
    )
}

class LayoutWithNavAndSide extends React.Component  {
    componentDidMount() {
        this.props.fetchSelf();
        // this.props.fetchUser('someusername')
    }

    render() {
        return (
            <main>
                <Nav self={this.props.self} />
                <Side page={this.props.page} self={this.props.self} user={this.props.user} />
                {Content of component that was passed in}
            </main>
        )
    }
}

const mapStateToProps = state => ({
    page: state.store.page,
    self: state.store.self,
    user: state.store.user
});

export default connect(mapStateToProps, {fetchUser, fetchSelf})(LayoutWithNavAndSide);



<BrowserRouter>
    <Switch>
        <LayoutForLoginAndSignup path="/login" exact={true} component={Login} />  
        <LayoutWithNavAndSide path='/self' component={Self} />
        <LayoutWithNavAndSide path="/:username" component={User} />  
    </Switch>
</BrowserRouter>

在这里，我感到困惑，因为我还没有新的反应/ redux / react路由器，我如何让User或Self的组件显示在布局中？只有当有人使用fetchSelf访问/ someuser时，才能调用fetchUser（在componentDidMount上）只有当他们转到/ self路由时？是否可以将布局作为一个函数而不是一个类？

Answer 1

创建将为其创建包含布局和条件的路径的组件。

const Layout = (props) => (
 {props.layout ? <SelfLayout /> : <UserLayout />}
)

创建两个布局。

const SelfLayout = () => ( <div> Self Layout </div> )

const UserLayout = () => ) <div> User Layout </div> )

创建路线。

<Route path={`/layout/${this.state.somelayout}`} render={() => <Layout 
layout={this.state.somelayout}/>} />

this.state.somelayout应该是决定我们所处的布局的条件，您可以根据应用的需要定制它，这只是一个指导原则。

布局在反应路由器v4中流动

1 个答案: