페이지 변경 후 외부 스크립트가로드되지 않습니다. react-router

Question

react-router를 사용하고 있습니다. 두 개의 반응 구성 요소에 동일한 외부 위젯을 포함 시켰습니다. 위젯은 처음으로 또는 페이지를 새로 고침 할 때 정상적으로로드됩니다. 문제는 페이지를 변경할 때 위젯이 더 이상로드되지 않는다는 것입니다. 페이지 1 위젯로드에

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')) 

클릭, 다시로드해야 위젯 페이지 2에 이론을 클릭하지만 그렇지 않습니다 : 내 코드를보고하십시오. Page1을 다시 클릭하면 위젯이로드되지 않습니다. 여기

전체 코드 : 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> 대신 사용할 수 있습니다, 또한 제거 : 여기

이 두 가지 문제를 돌봐 당신이하고자하는 일을 할 수있는 클래스의 거기에 스크립트가로드됩니다. 자리 표시 자 노드를 만들 때 사용할 소품을 추가 할 수도 있습니다.