react技巧 學習

2022-06-28 15:33:13 字數 639 閱讀 6894

1、當jsx中有多重判斷的時候,可以使用一下的方法: 

(() =>

else

}else

})()

也可以使用拆分子元件:

const  testcomponent = (a, b) =>

else

}else

}const conditions = [true, true

]呼叫:

2、靜態引入

在頁面上要引入靜態的話,需要通過require來進行引入

<

img

src=

/>

3、ref

在頁面中,使用ref來獲取該元素

<

input

placeholder

="修改名字"

ref= />

之後獲取該元素可以直接通過: this.myname 取得該元素

4、如果使用了scss,那麼webpack.config.dev.js和webpack.config.prod.js都要做相關的配置

,

以及exclude中新增/.scss$/,

React元件通訊技巧

communication.gif 1.父向子通訊 number只是個例子 let number this.state.number 需要注意,number 可以為普通引數 this.引數 也可以是 this.state.引數,其中this.state.引數若發生改變,會導致 child 重新渲染 ...

React元件通訊技巧

1.父向子通訊 number只是個例子 let number this.state.number 需要注意,number 可以為普通引數 this.引數 也可以是 this.state.引數,其中this.state.引數若發生改變,會導致 child 重新渲染 2.子向父通訊 從父元件接函式 ch...

React使用技巧 一

1 react元件開發要求必須在元件的最外層進行包裹,可以使用代替 避免影響頁面布局。2 react是資料驅動的,頁面上所有需要響應的都是通過改變資料,然後setstate更新頁面,而不是傳統的dom操作。3 react中的事件命名規則為 小駝峰 命名,如onclick onchange等。4 re...