在我的网站上，我有“卡片”，每张卡片都有许多元素（图像、文本、日期等）。这有点像 Twitter 中的推特卡片：

我希望整张卡片都是可点击的（应该是另一个页面的链接）。

目前，我将顶级元素作为<a>标签并使用aria-label，aria-describedby因此屏幕阅读器可以正确读取它。

<a
   href="/some-url"
   aria-label="Honda VFR. Price: $10,000. Kilometers: 10,000. Listed yesterday."
   aria-describedby="description-1"
   >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/1983_Honda_Interceptor_VF750F.jpg/300px-1983_Honda_Interceptor_VF750F.jpg" alt="Honda VFR picture" height="100" />

  <p>Honda VFR</p>

  <div>
    <p>$10,000</p>
    <p>Kms: 10,000</p>
    <p>Date listed: yesterday</p>
    <p id="description-1">This bike is pretty great and a lot of other details go here</p>
  </div>
</a>

我考虑过这样做，aria-labelledby="title-id-1 price-id-1 distance-id-1"但我发现通过明确地创建一个摘要句子，它读起来更好。

我依赖于屏幕阅读器将忽略<a>标签内的所有内容（如果我有aria-label）这一事实。这是一个安全的赌注吗？

这一切似乎有点奇怪，但我想知道是否有任何具体原因我不应该这样做。

不幸的是，设计要求整个卡片都是可点击的，所以只制作特定部分的链接不是一种选择。

另一种选择是使用 div、aria 这样的角色和 JavaScript，这感觉像是在错误的方向上迈出了一步。

任何帮助深表感谢。

jsbin：https ://output.jsbin.com/kusawu

我0.12.0在Android上使用React Native()并在我的页面上有一个ListView组件.我希望能够从列表中删除项目.

这个ListView看起来像这样:

<ListView
    dataSource={this.state.dataSource}
    renderRow={this._renderStory}
    onEndReached={this._getStories}
    />

该rowHasChanged方法看起来像这样.

this.state = {
    dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => {
            return row1 !== row2;
        },
    }),
    loaded: false,
};

所有这一切都很好.

现在,要删除一个项目,我有这个代码:

var indexOfItem = this._data.findIndex((item) => item.id === story.id);
this._data.splice(indexOfItem, 1);

this.setState({
    dataSource: this.state.dataSource.cloneWithRows(this._data),
});

我可以确认该项目正在从中删除this._data.this.state.dataSource._cachedRowCount应该减少一个.正在更新状态并触发渲染周期.但该项目不会从页面中删除.更重要的是,如果我放入控制台登录this._renderStory(),唯一发生的事情就是在列表底部呈现一个新行.

我错过了什么吗？我还需要做另一个步骤吗？

这里也提出了类似的问题,但他从来没有得到关于删除一行的答案.如何在ListView中添加/删除项目？

我在这个地方看到的所有其他例子都没有删除项目的例子.

更新:谢谢,它需要传递数组的克隆并设置一个键(抱歉只能接受一个答案).但这意味着整个清单正在呈现.最后,我只是在项目上设置了一个'removed'属性,测试了该属性的变化,如果一个项目被标记为remove,则在render方法中返回null,这比重新渲染所有项目更快.

我是React和Redux的新手.

我正在使用react-redux来调用AWS Cognito服务,该服务接受包含成功和失败回调的对象.当我在成功回调中的console.log中时,我从AWS Cognito返回了我的JWT; 但是,我怎么能yield put()在这个回调中,因为它不是一个生成器函数(function*).

这是一些代码:

export function* getAWSToken(){
  // username, password and userPool come from react state
  // not showing code for brevity.

  const userData = {
      Username: username,
      Pool: userPool,
    };
  const authenticationData = {
    Username : username,
    Password : password,
  };

  const cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData);
  const authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData);

  // This here is the callback
  cognitoUser.authenticateUser(authenticationDetails, {
    onSuccess(result){
      yield put(cognitoTokenObtained(result.getIdToken().getJwtToken())
    },
    onFailure(err){}
  });
}

我想在我的页面顶部有一个导航菜单，显示菜单项，悬停时显示子菜单项，并允许使用滚动条进行水平溢出。该解决方案必须不需要 JavaScript。

如果我没有水平溢出，我可以让下拉菜单正常工作。

我也可以按照我想要的方式进行水平工作。

但后来我失去了垂直溢出，所以我根本看不到我的下拉菜单。

菜单只需要初始可见菜单项的高度，显然在示例中按钮需要可点击。

我认为，问题是，设置overflow-x于auto创建一个新的块格式化上下文，以便overflow-y能不能visible和我的溢出获取隐藏。

有什么办法可以同时进行水平滚动和垂直溢出？

.menu-items--depth-0 {
  /* These three give me the horizontal scroll I want, but then the drop-downs don't show */
  width: 300px;
  overflow-x: auto;
  overflow-y: hidden;

  white-space: nowrap;
  position: relative;
  z-index: 0;
}

.menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item--depth-0 {
  display: inline-block;
}

.menu-item {
  position: relative;
  border: 1px solid grey;
  height: 30px;
  background: white;
}

.menu-items--depth-1 {
  position: absolute;
  top: …

我想创建一个Map，其中键可以是 anumber或 a string。我想用构造函数中的值初始化它。有些条目有number密钥，有些条目有string密钥。

但我收到打字稿错误。这是 TypeScript 错误，还是我做错了什么？

type MyMap = Map<string | number, string>;

// Errors, incorrectly?
const myMapWithMixedKeys: MyMap = new Map([
  ['abc', 'String key'],
  [123, 'Number key']
]);

// All fine
myMapWithMixedKeys.set('abcd', 'String key');
myMapWithMixedKeys.set(1234, 'Number key');

const myMapStrings: MyMap = new Map([
  ['abc', 'String key'],
  ['abcd', 'String key']
]);

const myMapNumbers: MyMap = new Map([
  [123, 'Number key'],
  [1234, 'Number key']
]);

错误：

No overload matches this call. …

我正在使用我网站上的Google+登录按钮,以便用户无需创建用户帐户.我对Google+按钮的任何社交方面都不感兴趣(目前为止).

我想让用户看到这样的东西:

但相反,他们会得到这样的东西:

我觉得这会让一些潜在的新用户反弹.如何使用顶部屏幕截图预设用户？

我将登录按钮属性设置为: data-scope="https://www.googleapis.com/auth/userinfo.email"或... plus.me但似乎plus.info无论如何都要包括在内.这意味着我的用户被要求获得所有额外权限.

我看过这篇文章:用谷歌登录,但不是谷歌+但是......

此Google页面和此Google页面推荐使用其他登录方式登录Google+登录按钮.而且有一天我可能想要使用社交功能,这对我来说很有意义.

那么,我做的事情是愚蠢的吗？有没有办法使用Google+登录按钮而不要求第二个屏幕截图中的所有权限？