reactjs - React 错误:无效的 DOM 属性 `tabindex` 。你的意思是 `tabIndex` 用 Bbootstrap 创建一个模式
问题描述
对不起我的英语:
我在 React 中创建了一个模态组件,编译良好,但控制台显示此错误:
警告:无效的 DOM 属性 tabindex。你是说tabIndex吗?在 div 中(在 ModalComponent.js:10) 在 div 中(在 ModalComponent.js:5) 在 ModalComponent 中(在 src/index.js:24) 在 div 中(在 src/index.js:23) 在 ModalCreate(在 src/ index.js:32) 在 StrictMode (在 src/index.js:31)
我知道在反应中属性必须是 camalCase 但引导程序需要这个属性才能工作。有我的代码:
const ModalComponent = (props) => {
return (
<div> {/* Tiene qe haber un solo elemento Padre */}
<button type="button" className="btn btn-primary" data-toggle="modal" data-target={props.obj.id}>
{props.obj.btnCallModal}
</button>
<div className="modal fade" id={props.obj.id} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">{props.obj.titulo}</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
{props.obj.body}
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">{props.obj.btnInModal}</button>
</div>
</div>
</div>
</div>
</div>
)
};
解决方案
在 react 中,tabIndex 对应 html 中的 tabindex。将其更改为 tabIndex 并且模态应该按预期工作。
推荐阅读
- moodle - 如何在 Moodle 中禁用电子邮件修改
- tkinter - 将 TopLevel 窗口保持在主窗口前面
- c++ - 在 DMA 之后对 int 进行反向更改
- travis-ci - 我可以在 .travis.yml 中使用安全的 Travis 环境变量上传到 PyPI 吗?
- android - 尝试单击切换框时出现 Espresso AmbiguousViewMatcherException
- docker - 由于端口已经绑定,docker/compose 镜像容器没有启动服务
- php - 使用 shell_exec grep UNIX 在行尾查找字符串
- javascript - 使用 ISBN 从 Google Books API 获取书名
- c# - 将 ngbootstrap 导入 Angular 6 项目会破坏项目
- r - 通过数据框中的组获取列的最大值