如何使用 React hooks 生成随机颜色？

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

先决条件：

• 反应.js
• 反应钩子

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

创建反应应用程序：

第 1 步：转到您的命令提示符并编写以下命令来创建一个反应应用程序。

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并粘贴以下代码以使用我们的随机颜色生成器自定义挂钩。

应用程序.js

import "./App.css";
import useGenerateRandomColor 
    from "./useGenerateRandomColor";
  
function App() {
  const { color, generateColor } 
            = useGenerateRandomColor();
  return (
    

      
        Generate random color
      
    
  );
}
  
export default App;

现在我们可以使用我们的 react 应用了。

运行应用程序的步骤：运行以下命令以在 localhost:3000 中启动您的应用程序。

npm start

输出：