React Router v4-样式链接组件的有效方法

Question

在React Router v4中设置Map<String, Consumer<String>> handlers = new HashMap<>(); ... public Consumer<String> getHandler(String key) { Consumer<String> h = handlers.get(key); if (h == null) { return System.out::println; } return h; } 组件样式的最正确方法是什么？如果<Link>只是一个锚标记，则不应在其中嵌套<Link>元素。它也不应嵌套在按钮内（因为它没有任何意义），因此最有效的方法是将其样式设置为按钮。这种方法有什么弊端？

Answer 1

自从添加了accessibility标签以来，我将从这个角度回答。

首先确定要链接还是按钮。链接用于导航。它会将您带到另一个页面或当前页面上的其他地方。一个按钮用于执行操作。

因此，您需要确定当用户选择元素时应该发生什么。您是要导航（链接）还是要执行操作（按钮）？

如果您要执行某项操作（例如“添加到购物车”或“注册”或“登录”），则使用链接并将其设置为按钮样式，那么将有几个可访问性问题需要处理：

• 链接的role需要设置为button
• 您需要添加一个键盘处理程序，以允许 space 键激活链接。 输入已经可以使用，但是 space 并不是链接的本机操作。当角色设置为“按钮”时，屏幕阅读器会将元素宣布为按钮，并告诉用户“按空格键激活”，因此您需要处理该键。

但是，如果仅使用而不是，则可以更轻松地解决此问题。参见first rule of ARIA。