javascript - 如何避免重复相同的功能以允许单击链接时使用修饰键？

Question

我希望用户可以选择执行 cmd+单击名称和 Angular 色，以便与其相关的页面在新选项卡中打开。

以下代码是我现在处理它的方式。我想要一种更好的解决方案来编写此代码→而不是重复相同的函数，我想在一个函数中处理这两种情况。

redirectToUser = e => {
    e.preventDefault();
    const { user } = this.props;
    const { userId } = getUsersData(user);
    if (e.metaKey) {
      window.open(`/v2/users/${userId}/`, '_blank');
    } else {
      this.props.history.push(`/v2/users/${userId}/`);
    }
  };

  redirectToRole = e => {
    e.preventDefault();
    const { user } = this.props;
    const { roleId } = getUsersData(user);
    if (e.metaKey) {
      window.open(`/v2/roles/${roleId}/`, '_blank');
    } else {
      this.props.history.push(`/v2/roles/${roleId}/`);
    }
  };

  renderDataList = () => {
    const {  user } = this.props;
    const { name, roleType } = getUsersData(user);

    const dataList = [
      { label: 'Name', value: name, onClick: e => this.redirectToUser(e) },
      { label: 'Role', value: roleType, onClick: e => this.redirectToRole(e) }
    ];
    return dataList;
  };

Answer 1

redirectTo = url => e => {
   e.preventDefault();
   if (e.metaKey) {
      window.open(url);
   } else {
      this.props.history.push(url);
   }
};

renderDataList = () => {
  const {  user } = this.props;
  const { name, roleType, roleId, userId } = getUsersData(user);

  const dataList = [
     { label: 'Name', value: name, onClick: this.redirectTo(`/v2/users/${userId}`) },
     { label: 'Role', value: roleType, onClick: this.redirectTo(`/v2/roles/${roleId}`) }
  ];
  return dataList;
};