组件传值
VUE
// 父组件
<GoodsList v-if="!isGoodsIdShow" :goodsList="goodsList"/>
// 子组件 -- 通过props获取即可
props: {goodsList:{type:Array,default:function(){return []}}}
REACT
// 父组件
export default function tab(props:any) {const [serverUrl, setServerUrl] = useState<string | undefined>('https://');console.log(props);// 父组件接收子组件的值并修改const changeMsg = (msg?:string) => {setServerUrl(msg);};return(<View className='tab'><View className='box'><TabName msg={serverUrl} changeMsg={changeMsg} /></View></View>)
}// 子组件
function TabName(props){console.log('props',props);// 子传父const handleClick = (msg:string) => {props.changeMsg(msg);};return (<View><Text>{props.msg}</Text><Button onClick={()=>{handleClick('77777')}}>测试</Button></View>);
};
获取DOM
VUE
this.$refs['ref']
REACT
// 声明ref
const domRef = useRef<HTMLInputElement>(null);
// 通过点击事件选择input框
const handleBtnClick = ()=> {domRef.current?.focus();console.log(domRef,'domRef')
}return(<View className='home'><View className='box'><Input ref={domRef} type="text" /><button onClick={handleBtnClick}>增加</button></View></View>)
列表渲染
VUE
<div v-for="(item, index) in mealList" :key="index">{{item}}
</div>
REACT
//声明对象类型type Coordinates = {name:string,age:number};// 对象let [userState, setUserState] = useState<Coordinates>({ name: 'John', age: 30 });// 数组let [list, setList] = useState<Coordinates[]>([{ name: '李四', age: 30 }]);// 如果你的 => 后面跟了一对花括号 { ，那你必须使用 return 来指定返回值！
const listItem = list.map((oi)=>{return <View key={oi.age}>{oi.name}</View>});return ({list.map((oi)=>{return <Text className='main-list-title' key={oi.age}>{oi.name}</Text>})}<View>{ listItem }</View></View>)
计算属性
VUE
computed: {userinfo() {return this.$store.state.userinfo;},},
REACT
const [serverUrl, setServerUrl] = useState('https://localhost:1234');
let [age, setAge] = useState(2);const name = useMemo(() => {return serverUrl + " " + age;
}, [serverUrl]);
console.log(name) // https://localhost:1234 2
监听器
VUE
watch: {// 保证自定义菜单始终显示在页面中customContextmenuTop(top) {...相关操作}},
REACT
import { useEffect, useState } from 'react';export default function home() {const [serverUrl, setServerUrl] = useState('https://localhost:1234');const [age, setAge] = useState(2);/*** useEffect第二个参数中所传递的值才会进行根据值的变化而出发;* 如果没有穿值的话,就不会监听数据变化*/useEffect(()=>{if (age !== 5) {setAge(++age)}},[age])useEffect(()=>{if(serverUrl !== 'w3c') {setServerUrl('w3c');}},[serverUrl])return(78)
}
函数)
