1、點擊元素，獲取綁定該事件的父級元素，使用 e.currentTarget。e.target 獲取的是，出發該事件的元素，該元素有可能是所綁定事件的元素的子元素。

　　

2、使用 react router4

　　history 只能傳遞給兒子組件，不能傳遞給孫子組件

　　如果孫子組件需要，可以通過 props 傳遞過去

　　

3、關于 react-router 不同頁面 根據地址欄標識的不同請求渲染不同的內容

this.props.history.push({pathname:'',state:{}
});

　　把頁面跳轉時要傳遞的參數放到 state 里面，這樣頁面刷新的時候通過 location.state 也能讀取到該值

?4、昨天突然想重構下代碼，整理下 state，結果碰到了一個調試好久沒找到的問題

問題代碼：

1 // metric 是一個數組，保存在 store 里面，通過 mapStateToProps 傳遞的
2 that.props.metric.map((val)=>{
3    // addColorSelect 根據 metric 每個值添加相應的設置
4     configureStore.dispatch(addColorSelect(val));
5 })

問題：觸發相應的操作，發現怎么樣，dispatch 里面的函數沒有相應的執行結果。然后由于思維太發散，一度找錯了解決方向

今天早上冷靜的調試了下，發現了問題所在

由于我的 val 直接用的是 store 中 metric 的值，在 action 返回值中，metric 的每個值都攜帶了 type 字段。這與 addColorSelect 對應 action 的 type 產生了沖突，所以沒有想要的效果

解決問題代碼：

1 that.props.metric.map((val)=>{
2     delete val.type;//刪除val中攜帶的action.type即可
3     configureStore.dispatch(addColorSelect(val));
4 })

總結：看來找錯誤一定不要病急亂投醫，認真看值傳遞的方向以及特定屬性內容還是很重要的

5、不要隨便使用 state 的狀態來進行判斷，因為 state 更改是需要經過聲明周期函數的，如果修改state后，一味根據 state 狀態進行判斷，有時會出現臆想不到的錯誤。

　　合理的做法是，根據某個值更新 state 狀態，然后根據該值進行下一步操作，判斷.....

　　今天就遇到一個坑，就是明明可以通過 flag 標示來判斷元素該是隱藏還是顯示，卻偏偏用了 state，這樣導致我的顯示狀態總是滯后一步，用了好長時間才找到問題所在，我內心也是嗚嗚嗚嗚的。如果使用 flag 直接判斷的話，然后修改 state，我就不需要去管 state 在執行流程，任他怎么執行，我的顯示狀態是正確的即可

6、在進行寫一個功能比較多的項目的時候，學會借助思維導圖，進行邏輯梳理。因為做公司項目的時候，一次行評完需求進行開發，導致需求太多越做越混亂，所以開發時花費一部分事件進行邏輯梳理會起到事半功倍的作用。小伙伴們學起來哦～

7、獲取真實的DOM元素方法：

　　a1、首先給組件的元素添加 ref 屬性，例如：<div ref='thisDom'><div/>

　　a2、在 componentDidMount 函數中通過 this.refs.thisDom?就可以獲取到。之所以是在 componentDidMount 中獲取是因為，在組件第一次 render 的時候才會讀取到 ref ，并賦值給 ? ? ? ? ? ? ? ? ?this的 refs 屬性。

8、某個組件的操作，觸發另外一個組件內容的更改。可以通過借助 PubSub-js 來解決，具體做法如下：

　　a1、首先在一個組件中注冊一個 pubsub 方法，例如：在組件A的 constructer中注冊，this.tocken = PubSub.subscribe('事件名稱', 觸發事件的回調函數)

　　a2、為防止事件多次被注冊，在組件 componentWillUnmount 函數中需要銷毀事件 PubSub.unsubscribe(this.token)

　　a3、在需要觸發該事件的地方寫 PubSub.sublish('對應的事件名稱','要傳入回調函數中的內容')

?　　a4、??需要注意的是，無論回調函數傳入什么，第一個參數永遠是 '事件名稱'

?

轉載于:https://www.cnblogs.com/z-one/p/9100785.html

總結

以上是生活随笔為你收集整理的react 开发过程中的总结/归纳的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。