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）。