正在更新Pinterest嵌入Preact App

Question

我有一個組件需要根據應用程序的狀態加載更改Pinterest嵌入。 Pinterest嵌入由一個<a>標籤組成，通過使用我的HTML底部的異步腳本（可用here）將其轉換爲<span>標籤內的複雜佈局。但是，我很難弄清楚如何通過使用更新後的道具進行重新渲染來清除嵌入的舊<span>並重新運行腳本以呈現新的嵌入。謝謝！

我的組件：

const PinterestEmbed = ({ location, size }) => (
    <div stye="text-align: center;margin: auto;"> 
     <a 
      data-pin-do="embedPin" 
      data-pin-width={size} 
      href={location}> 
      Pin via Pinterest 
     </a> 
    </div> 
); 

export default PinterestEmbed; 

Answer 1

這裏最簡單的解決辦法是切換到全成分：

export default class PinterestEmbed extends Component { 
    // keep a reference to the link so we can update it: 
    linkRef = el => { 
    this.link = el; 
    }; 
    // never re-render using virtual dom: 
    shouldComponentUpdate() { 
    return false; 
    } 
    // instead, we'll handle location changes ourselves: 
    componentWillReceiveProps(nextProps) { 
    if (nextProps.location!==this.props.location) { 
     this.link.href = nextProps.location; 
     // do something to tell Pinterest to update (not sure how they expose it): 
     Pinterest.reInitialize(this.link); 
    } 
    } 
    render({ location, size }) { 
    return (
     <div stye="text-align: center;margin: auto;"> 
     <a 
      ref={this.linkRef} 
      data-pin-do="embedPin" 
      data-pin-width={size} 
      href={location}> 
      Pin via Pinterest 
     </a> 
     </div> 
    ); 
    } 
}