javascript – propType失败:需要prop`id`使屏幕阅读器等辅助技术的用户可以访问`Dropdown`

这是我使用react-bootstrap渲染Dropdown菜单代码,

render(){
    return(
        <SplitButton title={this.state.title}>
          {Object.keys(dict).map(key => <MenuItem id={dict[key]} key={dict[key]} href={`#${dict[key]}`} onSelect={() => this.onTargetSelect(key,dict[key])}>{key}</MenuItem>)}
        </SplitButton>
    );
  }

我收到以下错误,

Failed propType: The prop `id` is required to make `Dropdown` accessible for users of assistive technologies such as screen readers. Check the render method of `Uncontrolled(Dropdown)`.

我没有id propType.

我究竟做错了什么?

解决方法

dropDowns需要一个有效的id,因为它是组件所需的prop.

ref:https://react-bootstrap.github.io/components.html#btn-dropdowns-props

为组件提供id.它会工作正常.

<SplitButton bsstyle={title.toLowerCase()} title={title} key={i} id={exampleId}>
      <MenuItem eventKey="1">Action</MenuItem>
      <MenuItem eventKey="2">Another action</MenuItem>
      <MenuItem eventKey="3">Something else here</MenuItem>
      <MenuItem divider />
      <MenuItem eventKey="4">Separated link</MenuItem>
</SplitButton>

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...