小编ndu*_*dub的帖子

我在我的应用程序上使用react-dropzone，并希望在一页上有多个dropzone来预览多个图像。例如，我希望能够将英雄图像拖放到在页面顶部显示英雄图像的放置区。然后，我想将不同的图像放到不同的放置区上，该放置区在缩略图容器中显示图像。

import React, { useState, useMemo, useEffect } from "react";
import Container from "../components/Container";
import { useDropzone } from "react-dropzone";

const Test = () => {
  // Dropzone
  const baseStyle = {
    flex: 1,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: "20px",
    borderWidth: 2,
    borderRadius: 2,
    borderColor: "#eeeeee",
    borderStyle: "dashed",
    backgroundColor: "#fafafa",
    color: "#bdbdbd",
    outline: "none",
    transition: "border .24s ease-in-out",
  };

  const activeStyle = {
    borderColor: "#2196f3",
  };

  const acceptStyle = {
    borderColor: "#00e676",
  };

  const rejectStyle = {
    borderColor: …

I am trying to add a Marketo form into a Gatsby site but have trouble with the order in which scripts are injected into the page.

When I try to render the component below, I get the error message "ReferenceError: MktoForms2 is not defined".

我尝试注释掉整个 useEffect 代码块，并且组件在没有表单的情况下可以很好地呈现到页面。然后当我将 "MktoForms2.loadForm("//app-sj11.marketo.com", "XXX-XXX-XXX", 1608)" 粘贴到控制台时，表单会按预期显示。

import React, { useEffect } from "react";
import Helmet from "react-helmet";

import "./form.scss";

const FormContactMkto = () => {
  useEffect(() => {
    MktoForms2.loadForm("//app-sj11.marketo.com", "XXX-XXX-XXX", 1608);
  }, []);

  return ( …