学习react的时候, 自身我工作中应用的都是vue, 应用想通过vue的应用去解析react的写法,
发现vue3的写法有挺多种的，和react17 也有不同的写法
于是就产生这篇文章, 有哪些不正确心愿大佬斧正
Vue(setup)写法
父组件(Parent.vue)
# Parent.vue<template> <div> <p>{{ count }}</p> <Child :count="count" @setCount="setCount"></Child> </div></template><script setup lang="ts">import { ref } from "vue";import Child from "./Child.vue";let count = ref(0);function setCount(param: typeof count.value) { count.value = param;}</script>子组件(child.vue)
# Child.vue<template> <div> <button @click="emit('setCount', ++count)">按钮</button> </div></template><script setup lang="ts">defineProps<{ count: number }>();const emit = defineEmits<{ (e: "setCount", count: number): void;}>();</script>子组件(newChild.vue) 第二种写法
# newChild.vue<template> <div> <button @click="$emit('setCount', count + 1)">按钮2</button> </div></template><script lang="ts">import { ref, defineComponent } from "vue";export default defineComponent({ props: { count: { type: Number, require: true, default: 0, }, }, emits: ["setCount"],});</script>React写法
父组件(Parent.tsx)
# Parent.tsximport { useState } from "react";import Child from "./newChild";function Parent() { let [count, setCount] = useState(0); return ( <div> <p>{count}</p> <Child count={count} setCount={setCount}></Child> </div> );}export default Parent;子组件(Child.ts)
# Child.tsinterface ChildInterface { count: number; setCount: (params: ChildInterface["count"]) => void;}interface ChildProps extends React.FC<ChildInterface> {}const Child: ChildProps = (props) => { let { count, setCount } = props; return ( <div> <button onClick={() => { setCount(++count); }} > 按钮 </button> </div> );};export default Child;子组件(newChild.ts) 第二种写法
# newChild.tsimport React from "react";interface ChildProps { count: number; setCount: (params: ChildProps["count"]) => void;}class Child extends React.Component<ChildProps> { render() { let { count, setCount } = this.props; return ( <div> <button onClick={() => { setCount(++count); }} > 按钮 </button> </div> ); }}export default Child;