如何向React組件添加自定義腳本？

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腳本標簽下有，但是腳本沒有任何反應。

我收到歸因於giphyLogic.js：1的“意外語法錯誤：意外的令牌<”錯誤，即使在實際的.js文件中，該行為空白。 我環顧四周，當包含的文件不存在但文件確實存在時，顯然會發生這種情況。 我已經仔細檢查了路徑（通過將圖像包含在同一文件夾中並將圖像成功加載到頁面上），它是正確的。

有沒有辦法解決這個問題，還是我必須在正在創建的React組件中創建方法？

Answer 1

不要混用jQuery並做出反應。 閱讀精心編寫的文檔，了解如何正確使用反應。 他們可以指導您完成許多示例，以啟動並運行一個簡單的應用程序。

再一次，不要使用jQuery並做出反應。 jQuery希望手動操作DOM，並做出反應來管理虛擬DOM。 兩者之間經常會發生沖突，您將會度過一段糟糕的時光。 如果您對反應有很深的了解，那么在極少數情況下可以使用一些jQuery，但是幾乎所有時間都應不惜一切代價避免這種情況。

顯然，諸如$.ajax()類的東西很好，但是對於任何涉及DOM操作的事物，請遠離。 而且，如果最終只使用jQuery來進行$.ajax()調用，則應切換到像axios這樣的精簡庫或使用本機fetch axios API。