0

问题

我正在编写一个 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" />

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

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

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

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

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

4

2 回答 2

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]。

于 2017-01-12T21:37:41.967 回答
1

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

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

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

myMapStateToProps = noState(ownProps => {
    …
});
于 2017-01-13T00:40:55.093 回答