首页 文章

如何改进我的React应用程序的架构[关闭]

提问于
浏览 次
3

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

  • 预期的操作（例如，转到"/login"路线，触发注销操作等）

  • 隐藏子导航栏

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（）中使用匿名函数很糟糕，我只是为了紧凑而写这样的

reactjs architecture redux

1 回答

  • 1

    你有90％的方式，但你忽略了“表现组件”的一个重要方面 . 从您提供的关于表达（哑）组件的链接;

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

    括号部分很重要 .

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

    你想要的是你的subheader子组件中看起来有点像这样的东西;

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

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

    回复于

相关问题