Question

Right now I have a Footer component with three different buttons.其中两个按钮的onClick取决于页面，并在这些页面中定义。目前我分别在Page组件中渲染Footer组件，其中onClick函数被定义并作为prop传递，并且工作得很好。

但是我将CSS元素max-width添加到页面中，并且也影响了页脚，这是我不想要的。

要解决这个问题，我需要在页面组件之外和路由器组件中渲染页脚，就像标题一样。但问题是我不知道如何链接那两个页面组件中定义的页脚按钮的点击处理程序。

解决这个问题的最佳方法是什么？推送我的Redux商店中的onClick功能？

目前它的工作方式如下：

Router.js

<div id="router-container">
    <Header />

    <Switch>
        <Route path="/dashboard" component={DashboardPage} />
        <Route path="/settings" component={SettingsPage} />
    </Switch>
</div>

DashboardPage.js

const DashboardPage = () => (
    <div id="dashboard-page">
        ...content
        <Footer onRightButtonClick={myDashboardPageClickHandler} />
    </div>
);

SettingsPage.js

const SettingsPage = () => (
    <div id="settings-page">
        ...content
        <Footer onRightButtonClick={mySettingsPageClickHandler} />
    </div>
);

但是我怎么能让它像这样工作：

Router.js（新）

<div id="router-container">
    <Header />

    <Switch>
        <Route path="/dashboard" component={DashboardPage} />
        <Route path="/settings" component={SettingsPage} />
    </Switch>

    <Footer />
</div>

DashboardPage.js / SettingsPage.js

const DashboardPage = () => {

    // set the onClick of the footer somehow to myDashboardPageClickHandler()

    return (
        <div id="dashboard-page">
            ...content
        </div>
    );
};

Answer 1

我建议使用React Router的withRouter函数来转换页脚，如下所示：

const FooterWithRouter = withRouter(Footer);

然后，在Footer组件内部，定义如下函数：

handleRightButtonClick() {
  const pathname = { this.props.location };

  if ( pathname === '/dashboard' ) {
    return myDashboardPageClickHandler;
  } else if ( pathname === '/settings' ) {
    return mySettingsPageClickHandler;
  }
}

并将按钮的onClick分配给此函数的返回值，如下所示：

<button class="right-arrow" onClick={handleRightButtonClick()}></button>

看看是否有效。

链接页面限制点击处理程序到页脚组件

1 个答案: