Как встроить скрипт в JSX в компонент?

Question

У меня есть сценарий, который загружает iframe, который я должен вставлять по определенному маршруту.

Функция Iframe нагрузки при обновлении страницы на маршруте, но когда я иду из дома -> другого маршрута, он не будет нагрузка.

Я пробовал различные обходные пути, используя componentWillMount и componentDidMount, но безрезультатно. Есть ли способ заставить его загружаться, когда я посещаю маршрут с другого маршрута?

EDIT: я уже проверил и сценарий, всегда есть, но не выполняется, если не используется на стороне сервера визуализации

кто-то еще была такая же проблема here и не было достаточным решением не хватает его включения в корневом компоненте приложения, которое является излишним. поэтому я понятия не имею, что такое решение является :(

class Component extends React.Component { 

constructor(props) { 
    super(props) 
} 

render() { 
    return (
     <div className='container'> 
      <script id="twine-script" src="//apps.twinesocial.com/embed?app=WCD&showNav=yes"></script> 
     </div> 
} 

Answer 1

Вы должны иметь возможность вводить скрипт на componentWillMount в заголовке документа. Вы можете возразить, что это не самый Реагировать путь, но я думаю, что в это частный случай, это имеет смысл.

const MyRouteComponent = React.createClass({ 

    componentWillMount() { 
     const script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.onload =() => { 
      this.setState({ 
       isLoaded: true 
      }); 
      console.log(TwineSDK); // TwineSDK should be defined now 
     }; 
     script.src = '//apps.twinesocial.com/embed?app=WCD&showNav=yes'; 
     document.head.appendChild(script); 
    }, 

    getInitialState() { 
     return { 
      isLoaded: false 
     } 
    }, 

    render() { 
     return (
      <div> 
      { 
       this.state.isLoaded ? <div>Loaded!</div> : <div>Loading...</div> 
      } 
      </div> 
     ); 
    } 

});