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

Question

aria-current如果我的路径变量为空，我正在尝试在 React 中添加一个条件。

{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>
    );
})}

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

谢谢

标签： reactjs

Answer 1

问题

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

解决方案

创建一个可以散布到元素中的道具对象。

{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>
  );
})}

为什么 key is"aria-current"和not 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"
/>