在 React 中有条件地添加 HTML 属性

Question

我试图在 React 中添加一个

aria-current

条件，只要我的路径变量为 null。

{props.path.map((values, index) => {
  const path = values.path ? `/${values.path}` : null;
  const aria = path !== null ? `aria-current="page"` : null;

  return (
    <li 
      className="breadcrumb-item"
      {...aria}
    >
      {path ? <a href={path}>{values.name}</a> : values.name}
    </li>
  );
})}

它不起作用。知道我该怎么做吗？

Answer 1

问题

字符串可以传播，因为它们是可迭代的，但 null 则不然。不过，在这里传播字符串没有意义，您想在道具中传播。

解决方案

创建一个可以传播到元素中的 prop 对象。

{props.path.map((values, index) => {
  const path = values.path ? `/${values.path}` : null;
  const aria = path !== null ? { "aria-current": "page" } : {};
  return (
    <li className="breadcrumb-item" {...aria}>
      {path ? <a href={path}>{values.name}</a> : values.name}
    </li>
  );
})}

为什么键是

"aria-current"

而不是

ariaCurrent

？

WAI-ARIA 和辅助功能

请注意，JSX 完全支持所有 aria-* HTML 属性。 尽管 React 中的大多数 DOM 属性和特性都是驼峰命名法， 这些属性应该是连字符（也称为 kebab-case， lisp-case 等），因为它们是纯 HTML 格式：

<input
  type="text"
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>