Question

长话短说：我试图在使用React的投资组合网站上添加一个前端应用。我想在应用程序渲染时将应用程序集成到组件中。我现在设置的是：

反应组件：

class Giphy extends Component {
    constructor(props) {
        super(props);
        this.state = {src: 1}

        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(event) {
        this.setState({src: event.target.value})
    }
    componentDidMount() {
        const script = document.createElement("script");

        script.type = "text/javascript";
        script.src = "/scripts/giphyLogic.js";

        document.body.appendChild(script);
    }

...而且render（）方法中的一堆东西并不重要

我想加载的脚本涉及一堆jQuery和简单的JS东西。

function displayButtons() {
    $("#buttons").empty();

    for (i=0; i<buttonArray.length; i++){
        var a = $("<button type='button' class='btn btn-info'>");
        var btnID = buttonArray[i].replace(/\s+/g, "+")
        a.attr("id", btnID);
        a.text(buttonArray[i]);
        $("#buttons").append(a);
    }
}

$("#addButton").on("click", function() {
    var newButton = $(".form-control").val();
    buttonArray.push(newButton);
    displayButtons();

})

function displayGIFs() {
    $(".btn-info").on("click", function() {
        $("#resultsContainer").empty();
        var subject = $(this).attr("id");
        var giphyURL = "http://api.giphy.com/v1/gifs/search?q=" + subject + "&api_key=dc6zaTOxFJmzC";

        $.ajax({ url: giphyURL, method: "GET"}).done(function(res) {
            for (t=0; t<25; t++) {
                var rating = res.data[t].rating; 
                var image = $("<img>");

                var imgURLmoving = res.data[t].images.fixed_height.url;
                var imgURLstill = res.data[t].images.fixed_height_still.url;

                image.attr("src", imgURLstill);
                image.attr("data-still", imgURLstill);
                image.attr("data-moving", imgURLmoving);
                image.attr("data-state", "still")
                image.addClass("gif");

                $("#resultsContainer").append("<p>" + rating + "</p");
                $("#resultsContainer").append(image);
            }
        })
        $(document.body).on("click", ".gif", function() {
            var state = $(this).attr("data-state");
            if (state === "still") {
                $(this).attr("src", $(this).data("moving"));
                $(this).attr("data-state", "moving");
            } else {
                $(this).attr("src", $(this).data("still"));
                $(this).attr("data-state", "still");
            }
        })
    })
}
displayButtons();
displayGIFs();

这一切都适用于独立的HTML文档，但我似乎无法使脚本正常工作。当组件加载并检查页面时，

<script type="text/javascript" src="/scripts/giphyLogic.js"></script>

是在bundle.js脚本标记下，但脚本中没有任何内容发生。

我得到一个＆＃34;未捕获的SyntaxError：意外的令牌＆lt;＆＃34;归因于giphyLogic.js：1的错误，即使在实际的.js文件中，该行仍为空白。我环顾四周，这显然发生在包含一个不存在的文件时，但文件肯定存在。我已经仔细检查了路径（通过在同一个文件夹中包含图像并在页面上成功加载图像）并且它是正确的。

有没有办法解决这个问题，或者我将不得不在我正在创建的React组件中创建方法？

Answer 1

不要混合使用jQuery并做出反应。通过阅读well-written documentation了解如何正确使用反应。他们可以引导您完成许多示例，以便启动并运行简单的应用程序。

再一次，不要使用jQuery并做出反应。 jQuery想要手动操作DOM，并且反应管理虚拟DOM。两个冲突往往会发生冲突，而且你会遇到不好的时间。如果你对反应有非常深刻的理解，很少有你可以使用某些jQuery的场景，但几乎所有的时候，都要不惜一切代价避免。

显然像$.ajax()这样的东西很好，但对于处理DOM操作的任何事情，请远离它。如果您最终只使用jQuery进行$.ajax()调用...您应该切换到更精简的库axios或使用原生的fetch API。

如何向React组件添加自定义脚本？

1 个答案: