ReactJS：更新組件後在div上運行jQuery的

Question

棘手的一個位是這個。

我有一個父組件，包含一個子div的負載，每個子組代表一個圖像和評級的實體，評分來自服務器，使用Raty。評分（分數）可通過數據得分屬性進行訪問，並且需要運行Raty以獲取該分數並相應地呈現評分欄。我假設這需要在componentDidUpdate（）事件中運行。

我想知道處理此問題的最佳方法。是否簡單地獲取父div的ID並告訴jQuery迭代所有子div，然後根據數據分值屬性呈現每個評分，或者是否有方法使用特定的React ID來將jQuery精確地告知要運行Raty的元素的ID？

謝謝。

Answer 1

也許這樣做是爲了讓使用ReactJS的「裁判」屬性的div引用的最簡單的方法：

const MyComponent = React.createClass({ 
    render() { 
     return (
      <div> 
       <div ref={ this.captureFirstDiv } /> 
       <div ref={ this.captureSecondDiv } /> 
      </div> 
     ); 
    }, 

    captureFirstDiv(firstDiv) { this.firstDiv = firstDiv; }, 
    captureSecondDiv(secondDiv) { this.secondDiv = secondDiv; }, 

    componentDidUpdate() { 
     $(this.firstDiv).raty(); 
     $(this.secondDiv).raty(); 
    } 
}); 

這種方法的問題是，ReactJS可能會非常有你跨越搞亂與DOM一起。如果發生這種情況，我建議創建一個永不更新的Raty React組件包裝器（通過設置shouldComponentUpdate（）始終返回false）。