頁面更改後不會加載外部腳本react-router

Question

我正在使用react-router。我在兩個反應組件中嵌入了相同的外部小部件。第一次或當我刷新頁面時，該小部件會正常加載。問題是當我更換頁面時，小部件將不再加載。請看看我的代碼：

var { Router, Route, IndexRoute, Link, browserHistory } = ReactRouter 

var MainLayout = React.createClass({ 
    render: function() { 
    return (
     <div className="app"> 
     <header className="primary-header"></header> 
     <aside className="primary-aside"> 
      <ul> 
      <li><Link to="/">Home</Link></li> 
      <li><Link to="/page1">Page1</Link></li> 
      <li><Link to="/page2">Page2</Link></li> 
      </ul> 
     </aside> 
     <main> 
      {this.props.children} 
     </main> 
     </div> 
    ) 
    } 
}) 

var Home = React.createClass({ 
    render: function() { 
    return (<h1>Home Page</h1>) 
    } 
}) 

var SearchLayout = React.createClass({ 
    render: function() { 
    return (
     <div className="search"> 
     <header className="search-header"></header> 
     <div className="results"> 
      {this.props.children} 
     </div> 
     <div className="search-footer pagination"></div> 
     </div> 
    ) 
    } 
}) 

var PageOne = React.createClass({ 
    componentDidMount: function() { 
    const plumxScript = document.createElement("script"); 
    plumxScript.src = "//d39af2mgp1pqhg.cloudfront.net/widget-popup.js"; 
    plumxScript.async = true; 
    document.body.appendChild(plumxScript); 
}, 

    render: function() { 
    return (
     <div 
      href="https://plu.mx/plum/a/?doi=10.1371/journal.pone.0056506" 
      className="plumx-plum-print-popup" 
      data-hide-when-empty="true" 
      data-popup="left" 
      data-size="medium" 
      target="_blank"> 
     </div> 
    ) 
    } 
}) 

var PageTwo = React.createClass({ 
    componentDidMount: function() { 
    const plumxScript = document.createElement("script"); 
    plumxScript.src = "//d39af2mgp1pqhg.cloudfront.net/widget-popup.js"; 
    plumxScript.async = true; 
    document.body.appendChild(plumxScript); 
    }, 

    render: function() { 
    return (
     <div 
      href="https://plu.mx/plum/a/?doi=10.1371/journal.pone.0056506" 
      className="plumx-plum-print-popup" 
      data-hide-when-empty="true" 
      data-popup="left" 
      data-size="medium" 
      target="_blank"> 
     </div> 
    ) 
    } 
}) 

ReactDOM.render((
    <Router> 
    <Route path="/" component={MainLayout}> 
     <IndexRoute component={Home} /> 
     <Route component={SearchLayout}> 
     <Route path="page1" component={PageOne} /> 
     <Route path="page2" component={PageTwo} /> 
     </Route> 
    </Route> 
    </Router> 
), document.getElementById('root')) 

點擊第一頁上和小部件的負載，單擊Page2上和理論上的小部件應重新加載，但事實並非如此。如果再次點擊Page1，widget將不會加載。

全部代碼在這裏：https://codepen.io/vh_ruelas/pen/MbgdOm

Answer 1

這個問題似乎與您要加載，還沒反應過來，路由器腳本。顯然，當你多次加載它時，它不會按預期工作，反正它看起來不是一個乾淨的解決方案。

如果您只加載腳本一次，則會留下以下問題：稍後呈現的佔位節點將不會自動轉換，因爲腳本僅在加載時初始化它們（source）。幸運的是，腳本添加了一個可以調用來解決這個問題的函數（顯然沒有記錄）：window.__plumX.widgets.popup.wireUp()。

但是腳本與React結合還存在另一個問題：它嚴重地修改了由React渲染的DOM，這會導致各種問題。有很多關於此的信息，例如，here。除了在React中重新實現小部件之外，最好的方法似乎是讓React渲染容器<div>，然後手動插入小部件節點。

這裏是一個類，需要照顧這兩個問題，似乎工作，你想要的方式：

var PlumXPopup = React.createClass({ 
    componentDidMount() { 
    this.appendNode(); 
    this.appendScript(); 
    }, 

    appendNode: function() { 
    const plumxNode = document.createElement("div"); 
    plumxNode.className = "plumx-plum-print-popup"; 
    plumxNode.setAttribute('href', 'https://plu.mx/plum/a/?doi=10.1371/journal.pone.0056506'); 
    plumxNode.setAttribute('data-hide-when-empty', 'true'); 
    plumxNode.setAttribute('data-popup', 'left'); 
    plumxNode.setAttribute('data-size', 'medium'); 
    plumxNode.setAttribute('target', '_blank'); 
    this.divNode.appendChild(plumxNode); 
    }, 

    appendScript: function() { 
    if (document.getElementById('plumx-script')) { 
     if (window.__plumX) { 
     window.__plumX.widgets.popup.wireUp(); 
     } 
     return; 
    } 
    const plumxScript = document.createElement("script"); 
    plumxScript.id = 'plumx-script'; 
    plumxScript.src = "//d39af2mgp1pqhg.cloudfront.net/widget-popup.js"; 
    plumxScript.async = true; 
    document.body.appendChild(plumxScript); 
    }, 

    render: function() { 
    var _this = this; 
    return <div ref={function(ref) { _this.divNode = ref }} /> 
    } 
}); 

你可以用它代替PAGEONE和PageTwo佔位<div>的，也擺脫腳本加載在那裏。您可能還想在創建佔位符節點時添加使用的道具。