如何在组件中嵌入 JSX 中的脚本？

Question

我有一个脚本可以加载一个 iframe，我必须将它嵌入到特定的路线上

我的应用程序是一个通用渲染的 React 应用程序，我将脚本包含在我的 JSX 代码中，并在注册到我的路由的组件中。

当我刷新路线上的页面时会加载 iframe，但是当我从家 -> 其他路线去时，它不会加载。

我使用componentWillMount 和componentDidMount 尝试了不同的解决方法，但无济于事。当我从另一条路线访问路线时，有没有办法强制它加载？

编辑：我已经检查过，脚本始终存在，但在不使用服务器端渲染时不会执行

其他人也有同样的问题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 上的脚本注入文档头部。你可以说这不是最 React 的方式，但我认为在这种特殊情况下它是有道理的。

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>
        );
    }

});