解決react中樣式衝突的方法：首先開啟相應的**檔案；然後將類名前加上模組名，如將整個元件的樣式表css類名前加上元件名lovevideo即可。
本教程操作環境：windows7系統、react17.0.1版本，該方法適用於所有品牌電腦。
解決react中樣式衝突
react在開發中很多有很多需要注意的地方，換句話說就是有很多小坑需要踩一踩，這裡分享一下我遇到的乙個小坑，就是樣式衝突，這是乙個值得注意的問題，首先看一下例子：
有兩個元件，乙個叫做testacomponent，另外乙個叫做testbcomponent，在testa元件中我寫了乙個背景色為藍色的按鈕，testb中我寫了乙個背景色為紅色的按鈕。
testacomponent 元件a：class testacomponent extends react.component {
render() {
return (
背景為藍色
testa css，背景設定的為藍色：.box{
font-size: 20px;
margin: 10px;
padding: 20px;
background-color: blue;
border-radius: 10px;
testb 元件b：class testbcomponent extends react.component {
render() {
return (
背景為紅色
testb css，背景設定的為紅色：.box{
font-size: 20px;
margin: 10px;
padding: 20px;
background-color: red;
border-radius: 10px;
**寫好之後npm start一下，這是會發現瀏覽器裡顯示的效果是這樣的：
明明兩個按鈕設定了不同的背景色，為什麼實際顯示會這樣呢？這是我們分析一下樣式的設定，在標籤中我們設定的class名為box，這是很多前端新人常用的命名方法，但是將不同元件的標籤的class類名設定為相同的名字會造成樣式衝突。
解決此問題方法：
將類名前加上模組名，如這個元件叫做lovevideo，則整個元件的樣式表css類名前加上元件名lovevideo：
testa 背景為藍色
.lovevideobox{
font-size: 20px;
margin: 10px;
padding: 20px;
background-color: blue;
border-radius: 10px;
修改好之後重新整理一下頁面，你就會發現樣式衝突的問題就會很好的解決：
除了這樣命名相同造成的衝突外，還有一種情況就是設定了一些全域性的樣式，比如：html{
background-color: #fff;
font-size: 14px;
margin: 0;
padding: 0;
background-color: #fff;
font-size: 14px;
這樣的全域性通用的樣式也切記不可設定的，因為使用react做乙個單頁應用只有乙個頁面，如果設定了全域性樣式則整個頁面都會載入出此樣式。
總結1、單個元件類名加上元件名字首，如元件名為lovevideo，則所有的樣式名前加上此字首
2、不要設定html｛｝、*｛｝之類的全域性通用樣式
react 版權問題 React 16 兩三事
這兩天 react 16 發布了，同時，react 16 與 15.6.x 都已經切換到 mit 協議。版權的熱議與一些公司的決斷對於整個社群而言看起來是個好事，同時，也給前端的元件化帶來了更多的思考。react 16 大致有以下改變 新的 fiber render 引擎 以支援許多原來做不到的關於...
react中this指向問題
一.行間定義事件後面使用bind繫結thisrun 第一種 這一種方法使用bind來修改this的指向，需要注意的是bind括號內第乙個引數是修改this的，後面可以設定其他引數進行傳值。二.在建構函式內部宣告this指向constructor props this.run this.run.bin...
react中mobx失效問題
發現問題 小白解決過程 第一 找關鍵點，即 觸發到問題。第二 觸發後執行了哪些操作。第三 操作業務問題是否正常。第四 與正常業務比較，差別在 第五 思考問題。第六 求助。小白感覺自己發現問題後，處理問題，找到問題的效率很低不知道是不是我的思路出現了問題，希望得到大佬們的支援。最後 發現問題是，在re...