如何在React中不是Route组件的包装器中正确访问props.history?

时间:2018-02-22 04:39:55

标签: javascript reactjs react-router react-router-dom

我有一个React应用程序,它使用Drawer来包装子组件。 当$array = New-Object System.Collections.ArrayList $procInfo = Get-ADUser -Filter {SamAccountName -eq "SomeUsername"} -Properties PasswordLastSet,CanonicalName |Select-Object Name,@{n='PasswordLastSet';e={[math]::Round((NEW-TIMESPAN –Start $_.PasswordLastSet).TotalDays,2)}},@{n='OU Path';e={$_.CanonicalName -replace '^.*?/(.*)/.*?$','$1'}} $array.Add($procInfo) $dataGrid1 = New-Object System.Windows.Forms.DataGrid $dataGrid1.DataSource = $array <Route>中的路径匹配时,会呈现子组件。

在有状态的Drawer组件中,我想处理工具栏或侧边栏中点击引发的事件,但目前,我使用<Switch>访问历史记录对象以导航到另一个页面。

如果该包装器中有两个子组件,该怎么办?

这是我用抽屉包装每个组件的方式。

this.props.children.props.history.push("...")

这是我处理抽屉中事件的方式。

const RouteWithDrawerLayout = ({ component: Component, ...rest }) => {
    return (
        <Route
            {...rest}
            render={props => (
                <PersistentDrawer>
                    <Component {...props} />
                </PersistentDrawer>
            )}
        />
    );
};

<Switch>
    <RouteWithDrawerLayout path="/listing" exact component={Listing} />
    <RouteWithDrawerLayout path="/register" exact component={Register} />
    <RouteWithDrawerLayout path="/auth" exact component={Auth} />
    <RouteWithDrawerLayout path="*" component={NotFoundPage} />
</Switch>

0 个答案:

没有答案