Question

我有一个用例，我希望某些页面显示<DefaultAppBar />，而某些页面（例如“设置”和“编辑配置文件”）显示<EditableAppBar />（其中一个是主应用程序栏，另一个显示“ X”图标和选中标记图标以保存更改）

目标是为了使一组开发人员可以进行此扩展。 理想地，他们要做的就是制作一条新路线，在该路线上使用渲染道具，并通过Redux动作来更改全局状态。然后，<AppShell />组件检查该状态并呈现相应的应用栏组件。我希望避免浏览目录（已经很大）并从componentWillMount（）方法调用操作。

临时解决方案是这样写我的路线：（{this.props.cantEdit是传递给设置为true或false的const的redux操作

<Route
    exact
    path={profile}
    render={props => 
        <Profile candEdit={this.props.canEdit(editFalse)} {...props} />}
/>
<Route
    path={settings}
    render={props => 
        <UserSettings canEdit={this.props.canEdit(editTrue)} {...props} />}
/>

我知道这不是最棒的-将函数CALL作为props传递。但是现在它正在工作，并且不会引起任何问题。由于这些动作实际上是由Route调用的，因此遵循这些原则将非常有用。同样，想法是开发人员要做的就是编写一条传递动作和变量的新路径，并且显示正确的应用程序栏组件，而无需深入特定组件文件即可编写方法。

任何建议/建议/不同方法都值得赞赏！

Answer 1

所以我发现一个解决方案是使用更高阶的组件。 HOC最终看起来像：

import React from "react";

const ChangeHeader = (func, WrappedComponent) => {
  return class extends React.Component {
    componentWillMount = () => {
      func();
    };

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default ChangeHeader;

然后我的路线最终看起来像这样：

<Switch>
    <Route exact path={app} component={ChangeHeader(this.props.editableFalse, Dashboard)} />
    <Route path={clientList} component={ChangeHeader(this.props.editableFalse, ClientList)} />
    <Route exact path={settings} component={ChangeHeader(this.props.editableFalse, Settings)} />
    <Route path={businessInfo} component={ChangeHeader(this.props.editableTrue, BusinessInfo)} />
    <Route path={availability} component={ChangeHeader(this.props.editableFalse, Availability)} />
    <Route component={Error} />
</Switch>

这确保了我可以将任何操作传递给组件，该操作将确定要为该页面呈现哪个标头（它也消除了控制台中的错误）。这具有很高的可扩展性，并且对于新开发人员来说很容易遵循相同的模式。

以可扩展的方式呈现不同的内容

1 个答案: