如何禁止在 ES7 函数定义中使用必需参数？答案

【问题标题】：How do I disallow use of a required parameter in a ES7 function definition?如何禁止在 ES7 函数定义中使用必需参数？
【发布时间】：2017-05-28 02:33:00
【问题描述】：

问题

我正在编写一个 ES7 函数，该函数将由定义参数顺序的 API 调用：

mapStateToProps(state, [ownProps]): stateProps

我需要使用ownProps 而不是state。是否可以编写函数定义，以便不指定第一个参数，或者任何尝试读取或写入它都会导致错误（“快速失败”）？

这不起作用

这看起来很吸引人，但当然_ 是一个有效的变量名...：

function myMapStateToProps(_, ownProps) {
  // ...
}

更多上下文

我的问题真的是Skipping optional function parameters in JavaScript的镜子。

我的问题的上下文是我正在编写一对 React 组件，它们实现了一个按钮，当它被点击时会做一些事情。

内部组件指定布局，包括按钮文本，外部组件使 modal 可见，并使用 react-redux 的 connect 函数与内部组件组合：

function MyButton({ handleOpen }) {
  return (
    <Button onClick={handleOpen} className={s['cta-button']}>
      Button text that I want to configure
    </Button>
  );
}

const mapStateToProps = () => {
  return {};
};

const mapDispatchToProps = (dispatch) => {
  return {
    handleOpen: () => dispatch(doSomeStuff()),
  };
};

const MyButtonContainer = connect(
  mapStateToProps,
  mapDispatchToProps,
)(MyButton);

export default MyButtonContainer;

用法是：

<MyButtonContainer />

我想要做的是通过传递给 MyButtonContainer 的属性使按钮上显示的文本可配置：

<MyButtonContainer text="Click me" />

通过使用用于将状态映射到道具 (ownProps) 的函数的第二个参数，我可以访问 text 属性，但我仍然不需要状态中的任何内容，因此为了清楚起见并减少机会导致错误我想编写 mapStateToProps 函数，以便第一个参数不可用。

我是从 ES7 转译的，所以任何标准的 ES 都可以。如果有提议的扩展，我也可以使用那些（感谢 webpack）。

或者，如果在 React 中有更好的方法来做到这一点，我也会对那个解决方案持开放态度。

为什么不把按钮文字放到 redux 商店里呢？

这是一个技术选项。我不喜欢它有几个原因： - 按钮文本是内部组件的属性，如果我没有使用 HOC 来包装它并提供按钮功能，我只需将其直接指定为属性 - 把它放在redux store 中是很多编码开销——写reducers、store initialisers、action creators，一定有更好更简单的方法！ - 我想在同一个渲染页面上显示多个按钮，每个按钮都有不同的文本 - 无论我要在容器类上指定什么属性，让它显示的文本看起来最干净

【问题讨论】：

“当然_ 是一个有效的变量名”。这不是一件好事吗？就用那个吧。
@Oriol 我想确保永远不会使用传递给我的 mapStateToProps 方法的第一个参数，并且阅读代码的人仅通过查看函数签名就知道这一点，因此使用任何有效的变量定义都是一件坏事。在一个完美的世界里，或者如果我是一个完美的开发人员，我会重写 API 以传递一个选项对象，然后我可以在我的方法中对其进行解构。但这不是一个完美的世界，我也不是一个完美的开发者

标签： javascript reactjs react-redux ecmascript-2016 higher-order-components

【解决方案1】：

使用_ 应该没问题。它的意图很明确，不应该被明智的开发人员误用。

您可以使用删除第一个参数的高阶函数：

function noState(fn) {
    return (state, ...rest) => fn(...rest); // I'm assuming the `this` context doesn't matter
}

myMapStateToProps = noState(ownProps => {
    …
});

【讨论】：

【解决方案2】：

如果您想禁止访问某个变量，只需使用更局部的变量对其进行遮蔽，不要对其进行初始化。

function func1(_, arg) {{
  return 'This works: ' + arg;
  let _;
}}
function func2(_, arg) {{
  return 'This throws: ' + _; // ReferenceError
  let _; // Prevents access to _
}}
console.log(func1(1,2));
console.log(func2(3,4));

仍然可以通过arguments[0] 访问该参数。

【讨论】：