Question

我有一个导航栏，当点击导航栏上的切换按钮时，该导航栏会在其下方打开子子导航栏组件。在子导航栏上是一个子下拉菜单，其中包含许多选项，其中onClick道具需要按顺序执行两项操作：

预期的操作（例如，转到＆＃34; / login＆＃34;路由，触发注销行动等）
隐藏子导航栏

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％的方式，但你忽略了“表现组件”的一个重要方面。从您提供的关于表达（哑）组件的链接;

很少有自己的状态（当他们这样做时，它是UI状态而不是数据）。

括号部分很重要。

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

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

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

精确的结构将从您的描述中收集难以收集的细节，但希望这会让您朝着正确的方向前进。

如何改进我的React应用程序的体系结构

1 个答案: