Question

我是React的新手，我正在尝试使用名为 useEffect 的 React Hook 来在Javascript中加载一个小的脚本。 javascript代码正在获取当前的完整年份，因此我试图在网站的FooterBottom组件中调用该年份。我正在使用tailwindcss制作此React应用程序的样式。我已经看到了一些使用此方法的解决方案，例如：Adding script tag to React/JSX和How do i use external script that i add to react JS?。

我避免使用componentDidMount（），因为我想学习如何使用React Hooks来使用它。非常感谢您的帮助。

JavaScript ：fullYear.js

var d = new Date();
var n = d.getFullYear();

document.write(d);

反应钩子：useScript.js

import { useEffect } from 'react'

const useScript = function (file) {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = file;
    script.type = 'type/javascript';
    script.async = true;
    script.onload = () => this.scriptLoaded();

    document.body.appendChild(script);

  }, [file]);
};
export default useScript;

反应组件：FooterBottom.js

import React from 'react'
import useScript from './hooks/useScript.js'

const mystyle = {
  visibility: 'visible'
};

const MyComponent = props => {
  useScript('../assets/fullYear.js')
}

export default function FooterBottom() {
  return (
    <div className="footer-bottom">
      <div className="container items-center mx-auto ">
        <div style={mystyle} className="bg-gray-800 text-center text-white wow zoomIn">
          <p>Copyright &copy; {MyComponent()}, All Rights Reserved.</p>
          <div className="footer_copyright">
            Designed by <a href="https://tailwindcss.com/">tailwindcss.com</a>
          </div>
        </div>
      </div>
    </div>
  );
}

Answer 1

您似乎正在使用此脚本来简单地为您提供版权的最新年份。与尝试做您当前正在做的事情相比，使用以下内容要干净得多。

import React from 'react'

export default function FooterBottom() {
 const currentYear = new Date().getFullYear();

 return (
   <div className="footer-bottom">
     <div className="container items-center mx-auto ">
       <div style={mystyle} className="bg-gray-800 text-center text-white wow zoomIn">
         <p>Copyright &copy; {currentYear}, All Rights Reserved.</p>
         <div className="footer_copyright">
           Designed by <a href="https://tailwindcss.com/">tailwindcss.com</a>
         </div>
       </div>
     </div>
   </div>
 );
}

现在，我了解到您正在尝试学习如何使用钩子，因此我将对其进行一些解释。

默认情况下，随时都会运行useEffect内部的任何内容，以刷新组件（称为重新渲染）。组件通常仅在其自身或父状态更改时才重新渲染。

useEffect总是在第一次加载组件时运行，但是我们也可以使用作为参数传递的数组来控制使useEffect触发的原因。例如，传递空数组[]将使useEffect在第一次渲染时运行一次。在您的情况下，传递[file]意味着useEffect块中的代码将仅在更改file

时执行

看看下面的代码。您会注意到我有2个状态正在更新。左键将更新计数，而右键将更新countTwo。您还会注意到有多个useEffect块。可以执行此操作来控制更新某些内容时要运行的内容。

如您所见，第一次useEffect只会在第一次应用组件已呈现，仅此而已。

第二次useEffect将在每次重新渲染应用程序时执行。按下任何一个按钮后，应用都会重新呈现，因为它会更新count或countTwo。

第三次useEffect将在重新渲染该应用程序时执行，但仅在countTwo更改时才会执行。

因此，即使您按了向左按钮，第三个useEffect也不会运行。只有第二个。但是，如果您按下右键，则除了第二个useEffect之外，还将运行第三个useEffect。

import React, { useEffect } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = React.useState(0);
  const [countTwo, setCountTwo] = React.useState(0);

  // THIS WILL ONLY RUN ON FIRST LOAD
  useEffect(()=> {
    console.log("I will only run on first component load!")
  },[])

  // THIS WILL RUN ANYTIME THE APP RE-RENDERS
  useEffect(() => {
    console.log("App was re-rendered, and count was updated");
  });

  // THIS WILL ONLY RUN WHEN THE APP RE-RENDERS AND countTWO
  // IS UPDATED
  useEffect(() => {
    console.log("App was re-rendered, and countTwo was updated");
  }, [countTwo]);

  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>

      <button onClick={() => setCountTwo(countTwo + 1)}>
        Count2: {countTwo}
      </button>
    </div>
  );
}

https://codesandbox.io/s/distracted-chatterjee-xznxd?file=/src/App.js

这样想，在useEffect中运行的代码是由组件刷新引起的“效果”。我们可以控制哪些更改触发了效果，以及当更新不同的变量/状态时发生了什么变化。

最后，为什么您的代码不起作用，也是因为这不是您使用外部javascript文件的方式。

您需要在外部文件中创建一个函数，然后将其导出。然后，将其导入您的react项目中。

示例如下：

Javascript：fullYear.js

export default function getYear() {
  return new Date().getFullYear();
}

反应组件：FooterBottom.js

import React from 'react'
import getYear from './fullYear'

export default function FooterBottom() {
  return (
    <div className="footer-bottom">
      <div className="container items-center mx-auto ">
        <div style={mystyle} className="bg-gray-800 text-center text-white wow zoomIn">
          <p>Copyright &copy; {getYear()}, All Rights Reserved.</p>
          <div className="footer_copyright">
            Designed by <a href="https://tailwindcss.com/">tailwindcss.com</a>
          </div>
        </div>
      </div>
    </div>
  );
}

希望这很好地说明了外部文件的工作方式以及useEffect的工作方式。

如何使用React Hook引用和加载React组件内的Javascript文件

1 个答案:

如何使用React Hook引用和加​​载React组件内的Javascript文件

1 个答案:

如何使用React Hook引用和加载React组件内的Javascript文件