页面更改后不会加载外部脚本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>的，也摆脱脚本加载在那里。您可能还想在创建占位符节点时添加使用的道具。