Question

问题

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

mapStateToProps(state, [ownProps]): stateProps

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

这不起作用

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

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

更多上下文

我的问题确实是Skipping optional function parameters in JavaScript的镜像。

我的问题的上下文是我正在编写一对React组件，这些组件实现了一个按钮，当它被点击时会执行某些操作。

内部组件指定布局，包括按钮文本，外部组件使模态可见，并使用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" />

通过使用用于将状态映射到props（ownProps）的函数的第二个参数，我可以访问text属性，但为了清晰起见，我仍然不需要来自州的任何内容。减少导致错误的机会我想编写mapStateToProps函数，以便第一个参数不可用。

我正在从ES7进行转换，因此任何标准ES都可以。如果有建议的扩展，我也可以使用它们（感谢webpack）。

或者，如果在React中有更好的方法，我也会对该解决方案持开放态度。

为什么不将按钮文本放在redux商店中？

这是一个技术选项。我不喜欢它有几个原因： - 按钮文本是内部组件的属性，如果我没有使用HOC来包装它并提供按钮功能，我只需将其直接指定为属性 - 将它放在redux存储中需要大量的编码开销 - 编写Reducer，存储初始化器，动作创建器，必须有更好更简单的方法！ - 我想在同一个渲染页面上显示多个按钮，每个按钮都有不同的文本 - 无论我要在容器类上指定属性，让它显示的文本看起来最干净

Answer 1

如果您想禁止访问某个变量，只需用更本地的变量对其进行遮挡，并且不要对其进行初始化。

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]访问该论点。

Answer 2

使用_应该没问题。它的意图很清楚，明智的开发人员不应该意外使用它。

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

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

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

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

2 个答案: