React function传递参数
前言
rect 不能写 onClick={this.textValue()} 因为我们是在渲染区域进行写的他就会认为要调用 这个函数
所以你会发现在渲染的时候就被调用了 所以要写成 onClick={this.textValue}
这样子就只是在onClick上面绑定了一个数值
当页面进行触发的时候他回去类里面去找这个绑定的数值，发现是个Function 就会执行方法
类组件 但是传参你就会发现没了
解决
错误
代码解析
在代码渲染的时候绑定个函数点击的时候先去触发函数然后通过函数进行绑定
错误点 方法调用方法会开启严格模式，在严格模式下就可以用了
正确
代码解析
将父级的this 绑定到事件上面 这样就可以拿到数据
import React, { useState } from "react";
import { BrowserRouter, Route, Routes,Link,Outlet,useNavigate} from "react-router-dom"
// import WitRouter from "../../router/witRouter"
import {gou} from '../../App'
import { Badge, TabBar } from 'antd-mobile'
import News from '../News/index'
import {
AppOutline,
MessageOutline,
MessageFill,
UnorderedListOutline,
UserOutline,
} from 'antd-mobile-icons'
export default class Home extends React.Component{
// navigate = useNavigate();
GoNews = () => {
gou()
// WitRouter("cityList","张三")
console.log(this)
// this.props
// this.navigconsate("cityList")
}
textValue(){
}
state = {
tabs :[
{
key: 'home',
title: '首页',
icon: () =>
{this.state.tabs.map(item => (
{/**/}
{/* {this.state.tabs.map(item => (*/}
{/* */}
{/**/}
{/* {this.state.tabs.map(item => (*/}
{/* */}
函数组件
嘿嘿》》》》 这个时候
第一个模式就可以用了
为啥呐这个是因为在函数里面不存在this 也就是说就算你用箭头函数，或者bind 这些都不能用了
但是函数的组件是全局的可以过原型链从调用的那层找到最外层为止
import React from "react";
import { useLocation } from 'react-router-dom'
import classes from './index.module.css'
import Textconst from '../../Textcontext/textcontext'
import News from "../News";
import {render} from "react-dom";
export default function CityList () {
React.useEffect( ()=>{
return () => {
// 销毁函数
}
},[])
// useEffect = componentUnMount componentDidMount ComponentDidUpdate
// 检测函数
let [age,setAge] = React.useState(10)
const refcity = React.useRef()
const a = useLocation()
const chengName = function(event) {
console.log("??????????")
console.log(event)
// console.log(refcity,":cdslvdsjvkldjsiv")
}
const Changevalue = function () {
setAge("20")
}
return (
{ (value) =>{ return
{value.name}
{ chengName(age)}}>"改变数据的值"
"姓名:"{age}
"姓名:"
"kkkk"
);
}
// export default class CityList extends React.Component {
//
// componentDidMount() {
// let Cetvalue = function(){
// let a = useLocation()
// return (a)
// }
// console.log(Cetvalue())
// // console.log(useLocation())
//
// }
//
// render() {
// return 城市选择页面
// }
// }
多说一句:react 跟写差不多原生的，原生有个方法 event ,
js function 关于 （ ），如果你不写（）js 会进行默认传参 如果写了（）就会用你的自定义传参