如何在 IE9 的 React 应用程序中加载 jQuery？错误 SCRIPT5009：“$”

Question

我会很感激一些关于如何在我的 React 应用程序中加载 jQuery 的建议，该应用程序涉及一个简单的表单。我想在这里实现的是在 IE9（我的应用程序支持的最低 IE 版本）中为我的 React 表单输入添加占位符支持。

我使用检测浏览器来检查和检索浏览器版本。如果是 IE9，则在我的 head 标签中加载 jQuery，并使用下面著名的 jQuery 脚本将占位符插入到我的输入中。

我现在加载 jQuery 的方式，由于显而易见的原因，我得到了错误 SCRIPT5009: '$'。我在这里做错了什么，我该如何解决这个问题？我也试过 import $ from 'jquery';然后只是删除从头部加载 jquery 的脚本，但这并不能解决我的问题，我仍然从上面得到同样的错误。

这是我的代码：

import React from 'react';
const browser = require('detect-browser');

class App extends React.Component {
    constructor(props) {
        super(props);
        this.iePlaceholder = this.iePlaceholder.bind(this);
    }

    iePlaceholder() {
        if(browser.name === 'ie' && browser.version === '9.0.0') {
            const scriptJquery = document.createElement("script");
            scriptJquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js";
            document.head.appendChild(scriptJquery);

            const placeholdersIeScript = `
                $(document).ready(function() {
                    $('[placeholder]').focus(function() {
                        var input = $(this);
                        if (input.val() == input.attr('placeholder')) {
                            input.val('');
                            input.removeClass('placeholder');
                        }
                    }).blur(function() {
                        var input = $(this);
                        if (input.val() == '' || input.val() == input.attr('placeholder')) {
                            input.addClass('placeholder');
                            input.val(input.attr('placeholder'));
                        }
                    }).blur();
            });
            `
            const script = document.createElement("script");
            script.type = "text/javascript";
            script.innerHTML = placeholdersIeScript;
            document.head.appendChild(script);
        }
    }

    componentWillMount() {
        this.iePlaceholder();
    }

    render() {
        return (
            <div>
                <h1>A title</h1>
                <form>
                    <input id="myInput"
                        type="text"
                        placeholder="MyPlaceholder"
                    />
                </form>

            </div>
        );
    }
}

export default App;

Answer 1

在使用 npm 安装 jquery 后，您可以像 const $ = require('jquery'); 这样简单的操作，然后只需运行脚本，而不是像您正在做的那样尝试注入它。

另一种方法是使用 webpack。在您的 webpack 配置文件中，您可以使用以下语法添加插件：

plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
]

这将自动用 jquery 替换代码中的 $ 引用，尽管它只是避免在代码的其他地方使用 const $ = require('jquery'); 的捷径。