本文主要是介绍自定义 classNames hooks，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
什么是自定义 hooks
自定义hooks是react提供的编写公共函数的方法
自定hooks 和 通用函数的区别
一定有人会说 hooks 可以使用react 的方法，但是公共函数也可以，因为 jsx 语法的原因
函数必须开头进行大写
其实这些都是 react 的语法规范，我们用hooks 也是方便用于管理、
总结： jsx 会将 函数开头大写 和 use 定义的标识为react 函数 可以使用react 内部的属性以及方法
案例
classname
import { useState,useEffect } from "react"const UseClass = (...argus)=> {const [state,setState] = useState()useEffect(()=> {setState(argus.join(" "))},[])return state}
export default UseClass使用
/* eslint-disable no-unused-expressions */
import React ,{ useEffect} from "react"
import {useState} from "react"
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import logincss from './index.module.css'
import Store from "../../Redux/redux";
import { BrowserRouter, Route, Routes,Link,Outlet,useNavigate} from "react-router-dom"
import UseClass from "./className";
const Log = () => {const usenavigate = useNavigate()// userstate 功能进行数据的绑定舰艇 两个参数 第一个为数据第二个为函数形式的变化只有通过函数进行改动才能更新页面的数据let [[form],setform] = useState(Form.useForm())const linitform = {password:'123456',username:'wangchangzhou'}const login = () => {console.log("deng录")// eslint-disable-next-line react-hooks/rules-of-hooksusenavigate('/home',{state:{login:true}}) Store.dispatch({type:'login',login:true})}const valueSet = ()=> {const time = nullif(time){clearTimeout(()=> {})}setTimeout(()=> {console.log("KKKKKKK")})}const getValue = ()=> {}useEffect(()=> {// console.log(useClass(logincss.login_bution,logincss.login_bution_BACK),"返回值")},[])const fundom = (value)=> {if(value ==="取消") {form.resetFields()}else {login()// console.log(form.getFieldsValue());// let value = form.getFieldsValue()// console.log(linitform === value)// // eslint-disable-next-line no-unused-expressions// if(linitform.password == form.getFieldsValue().password && linitform.password == form.getFieldsValue().password ){// login()// }}}return(<><button className={UseClass(logincss.login_bution,logincss.login_bution_BACK)} onClick={getValue()}>1</button><button onClick={getValue()}>2jn kkkkkkkkk</button></>)
// return(
// <div className={logincss.log_box}>
// <Form
// form={form}
// className={logincss.log_box_from}
// name="normal_login"
// initialValues={{// }}// >
// <div>
// <span style={{fontSize:'20px',textShadow:'4px 4px 4px'}}>低代码测试</span>
// <Form.Item
// className={logincss.log_box_item}
// name="username"
// label ='名称'
// rules={[
// {
// required: true,
// message: 'Please input your Username!',
// },
// ]}
// >
// <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
// </Form.Item>
// <Form.Item
// className={logincss.log_box_item}
// name="password"
// label ='密码'
// rules={[
// {
// required: true,
// message: '请输入密码',
// },
// ]}
// >
// <Input
// prefix={<LockOutlined className="site-form-item-icon" />}
// type="password"
// placeholder="请输入密码"
// />
// </Form.Item>
// {/* <Form.Item className={logincss.log_box_item}>
// <Form.Item name="remember" valuePropName="checked" noStyle>
// <Checkbox>Remember me</Checkbox>
// </Form.Item> */}
// {/*
// <a className="login-form-forgot" href="">
// 记住密码
// </a>
// </Form.Item> */}// <Form.Item className={logincss.log_box_item}>
// <Button onClick={()=>{ return fundom('登陆') }} type="primary" htmlType="submit" className="login-form-button">
// 登录
// </Button>
// <Button onClick={()=>{ return fundom('取消') }} style={{marginLeft: '20px'}} type="primary" htmlType="submit" className="login-form-button">
// 取消
// </Button>
// </Form.Item>
// </div>
// </Form>
// <Outlet></Outlet>
// </div>
// )
}
export default Log
这篇关于自定义 classNames hooks的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
