Question

基本上，我正在尝试克隆一个元素并在React.cloneElement中更改其aria-label。我有一个组件 - ButtonArrows - 它创建了两个Button组件，一个箭头图标指向左侧，另一个指向右侧。我希望能够以编程方式更改aria-label，但连字符会抛出错误。

以下是一些显示我正在尝试做的代码：

const ButtonArrows = ({leftArrow, rightArrow, ...props})
  const prevButton = (
    <Button
      aria-label="Previous",
      icon={leftArrow}
    />
  );

  const nextButton = React.cloneElement(prevButton, {
    //this is where the problem is:
    aria-label="Next",
    icon={rightArrow}
  });

  return(<div {...props}>{prevButton}{nextButton}</div>);
}

显然我因为连字符而不能aria-label="Next"。

有什么建议吗？不幸的是，当它出现在aria标签上时，React没有htmlFor（代表html-for）。我应该在Button上放一个ariaLabel道具并将其传递下去，还是有办法直接使用我缺少的cloneElement？

Answer 1

您应该可以在此处使用纯JavaScript对象：

const nextButton = React.cloneElement(prevButton, {
  'aria-label': 'Next',
  icon: rightArrow
});

Answer 2

const ButtonArrows = ({leftArrow, rightArrow, ...props})
  const prevButton = (
    <Button
      arialabel="Previous",
      icon={leftArrow}
    />
  );

  const nextButton = React.cloneElement(prevButton, {
    //this is where the problem is:
    arialabelledby="Next",
    icon={rightArrow}
  });

  return(<div {...props}>{prevButton}{nextButton}</div>);
}

将aria-label更改为arialabel

在React.cloneElement（）中设置aria-label / aria-labelled？

2 个答案: