全網都沒搜索到這個報錯,難道真的全世界只有我遇到這個問題:
Warning: React does not recognize the bsStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase bsstyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.
環境是react腳手架生成的
測驗代碼很簡單.
1.入口檔案引css
import 'bootstrap/dist/css/bootstrap.css'
2.隨便一個組件測驗一下<Button>
import { Button } from "react-bootstrap";
..中間省略...
<Button bsStyle="success">click</Button>
結果:
1.能正常顯示這個按鈕,但bsStyle屬性明顯未生效,無論怎么改永遠是默認樣式
就算刪掉也是如此:
2.而且,瀏覽器Console報錯
Warning: React does not recognize the bsStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase bsstyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.
react不認這個屬性
3.改了小寫bsstyle當然也沒任何作用
4.當然,使用傳統的bootstrap的className的方式,可以正常顯示
<Button className='btn btn-success'>click</Button>
那么究竟應該怎么弄才能像官網一樣使用bsStyle?
網上搜到的都是在public/index.html里面引bootstrap各種包,無效,我覺得也不是這個問題.
問題就是react沒把bootstrap的組件當react組件,不認自定義prop
uj5u.com熱心網友回復：
雖然目前我也沒有搞明白，翻了原始碼，里面使用的是“variant”這個屬性<Button variant="success">click</Button>
這樣使用也可以。
網上說沒有引入bootstrap的樣式，反正我加進去也沒有效果。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
uj5u.com熱心網友回復：
原來是版本的問題，新版的有些組件引入會發現不存在；使用npm install [email protected] --save
將版本降下來就好了
uj5u.com熱心網友回復：
更新一下這個問題，中文網站的檔案已經是過時的了，剛入手的就不要再使用了。和新版的差別很大。http://react.tgwoo.com/introduction.html
建議到官方的網站上查看檔案
https://react-bootstrap.github.io/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/30412.html
標籤：HTML(CSS)
上一篇：layui table 自動渲染 如何使用 done: function (res) 回呼函式
下一篇：google圖片搜索顯示圖片大小