利用ReactHooks实现随机颜色生成的详细指南

原文:https://www . geeksforgeeks . org/如何使用反应挂钩生成随机颜色/

我们将制作一个 react 自定义钩子来生成随机颜色。

先决条件:

• React.js


• 反作用钩

方法:基本上，如果我们熟悉 react，那么我们都已经使用过 React 自定义钩子(比如 useState 、 useEffect 、useContext 等)。).我们还可以制作定制的反应挂钩，可以在任何地方使用。这里有一个生成随机颜色的小代码。这里我们将制作一个随机的颜色生成器自定义钩子(在我们的自定义钩子文件中)，这里我们将制作一个用于改变颜色的函数名为(generateColor)，我们将传递颜色并生成颜色作为返回。然后，我们将在 App.js 中通过析构来使用它，并将生成的颜色用作按钮的 onClick 事件函数，通过该函数我们将更改窗口的颜色。

创建反应应用程序:

第一步:进入你的命令提示符，写下下面的命令，创建一个 react app。

npx create-react-app


步骤 2: 然后通过键入以下命令进入您的应用程序文件夹

cd


项目结构:我们的文件夹结构应该是这样的。

文件夹结构

步骤 3: 在您的 src 文件夹中创建一个单独的文件usegeneraterandomcolor . js，并使用以下代码:

使用 usegeneraterandomcolor . js

import {useState} from 'react';
const useGenerateRandomColor = () => {
    const [color,setColor] = useState("")
    const generateColor = () =>{
        setColor(Math.random().toString(16).substr(-6));
    };
    return {color,generateColor};
};
export default useGenerateRandomColor;


第 4 步:现在转到 src/ App.js 并粘贴下面的代码以使用我们的随机颜色生成器自定义钩子。

App.js

import "./App.css";
import useGenerateRandomColor 
    from "./useGenerateRandomColor";
function App() {
  const { color, generateColor } 
            = useGenerateRandomColor();
  return (
          100vh",
        width: "100vw",
        backgroundColor: "#" + color,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
              40px",
          borderRadius: "10px",
          backgroundImage: 
"linear-gradient(to top, #a8edea 0%, #fed6e3 100%)",
          fontSize: "larger",
        }}
        OnClick={generateColor}
      >
        Generate random color