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上的脚本注入文档头。你可以说这不是最反应的方式，但我认为在这种特殊情况下它是有意义的。

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

});

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

1 个答案: