reactjs - 编码风格：如何区分来自 parent 或 redux 的 props？

Question

当我在一个组件中接受 redux props 和 parent props 时，我注意到很难从上述两个中分辨出 props。

例如

下面的组件接受四个变量：isOpenSidebar、toogleSidebar、isOpenMenu和toogleMenu。但是isOpenSidebar,toogleSidebar来自 redux，isOpenMenu,toogleMenu来自父 props。

为了区分不同来源的 props，我考虑在变量后使用下划线来标​​记来自 redux 的 props 像 this isOpenSidebar_，或者在像 thisredux_isOpenSidebar或rdx_isOpenSidebar. 但我不确定这些是否是好主意？

有什么好的常用方法来区分不同产地的道具吗？

const Header = ({ isOpenSidebar, toogleSidebar, isOpenMenu, toogleMenu }) => {
  return (
    <header>
      {!isOpenSidebar && (
        <div onClick={() => toogleSidebar(true)}>
          open sidebar
        </div>
      )}

      {!isOpenMenu && (
        <div onClick={() => toogleMenu(!isOpenMenu)}>
          open menu
        </div>
      )}

      <h4>header</h4>
    </header>
  );
};

export default connect(
  (state) => ({
    isOpenSidebar: state.ui.isOpenSidebar,
  }),
  { toogleSidebar }
)(Header);

标签： reactjsreduxcoding-stylereact-props