reactjs - 如何改进 React 应用程序的架构

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 4 年前。

Improve this question

我有一个导航栏，其中有一个子子导航栏组件，当单击导航栏上的切换按钮时，该组件会在其下方打开。子导航栏上有一个子下拉菜单，其中包含许多带有 onClick 属性的选项，这些选项需要按顺序执行两件事:

1. 预期的操作(例如转到“/login”路线，触发注销行动等)
2. 隐藏子导航栏

FWIW我有一个 redux 操作来隐藏子导航栏，并且路由是通过react-router v4完成的。目前这一切都运行良好，我试图强制自己遵守 presentational (dumb) components vs containers pattern但这样做感觉我一团糟。

例如，为了使下拉选项组件保持沉默，我有一个具有两个功能的导航栏容器:

handleSubheaderItemClicked = (funcToExec, data) => {  
  funcToExec(data)
  this.props.dispatch(hideSubheader)
};

handleLoginClicked = () => {
  this.props.history.push("/login")
};

这些函数作为 props 传递给(哑)子标题子组件，并再次传递给具有属性的子下拉组件

onClick={() => { this.props.handleItemClicked(this.props.handleLoginClicked)}}

我是否滥用了这种模式？这看起来很复杂，但给一些低级别组件提供对 hideSubheader() 操作和路由器历史记录的访问也看起来很脏。

我还缺少另一种方法吗？

<小时/>

P.S 我知道在 render() 中使用匿名函数是不好的，我只是为了紧凑性而这样写

Answer 1

您已经完成了 90%，但您忽略了“表示组件”的一个重要方面。从您提供的有关演示(哑)组件的链接；

Rarely have their own state (when they do, it’s UI state rather than data).

括号部分很重要。

您的示例完美展示了“UI 状态”。打开和关闭菜单是 100% UI。因此，将该逻辑保留在菜单组件中而不是 redux 中是有意义的。

您想要的是在子标题子组件中看起来有点像这样的东西；

handleOnClick() {
    this.setState({menuOpen: false});
    this.props.onClick();
}

确切的结构将提供难以从您的描述中收集到的详细信息，但希望这能让您找到正确的方向。