Question

我想知道是否有一种方法可以在给定prop信息的情况下有条件地返回mapStateToProps中的状态值。请参阅下面的一些示例代码。我收到一些意外的解析错误。有没有办法做这样的事情？谢谢。

const mapStateToProps = (state, ownProps) => (
  if (ownProps.name === "alpha") {
    return {
      data: state.alpha.data
    }
  } else if (ownProps.name === "beta") {
    return {
      data: state.beta.data    
    }
  } else {
    return null;
  }
);

Answer 1

您可以像这样使用JavaScript的switch：

const mapStateToProps = (state, ownProps) => {
  switch (ownProps.name) {
    case "alpha":
      return {
        data: state.alpha.data
      };
    case "beta":
      return {
        data: state.beta.data
      };
    default:
      return null; 
  }
};

注意：您代码的问题在于，您使用的是 ( ，而不是{中的 block scope 功能的身体。

Answer 2

是的，您可以将它编写为带有大括号而不是括号的普通函数，以便立即返回表达式。

Answer 3

我建议使用选择器模式，而不是直接插入逻辑。

selectorName(state, name) {
    if (name === 'alpha') return state.alpha.data
    else if (name === 'beta') return state.beta.data
    else return null
}

然后在mapStateToProps中：

const mapStateToProps = (state, ownProps) => {
    return { data: selectorName(state, ownProps.name) }
}

它有助于减少潜在的错误，并使单元测试更加容易。作为额外的好处，数据道具将不会为空，而不是整个道具。

如果则mapStateToProps中的语句

3 个答案: