通过vue3学习react17(一) - 组件之间方法调用(ts)

学习react的时候, 本身我工作中使用的都是vue, 使用想通过vue的使用去解析react的写法,

发现vue3的写法有挺多种的，和react17 也有不同的写法

于是就产生这篇文章, 有哪些不正确希望大佬指正

Vue(setup)写法

父组件(Parent.vue)

# Parent.vue

子组件(child.vue)

# Child.vue

子组件(newChild.vue) 第二种写法

# newChild.vue

React写法

父组件(Parent.tsx)

# Parent.tsx
import { useState } from "react";
import Child from "./newChild";

function Parent() {
  let [count, setCount] = useState(0);
  return (
    

      
{count}
      
    
  );
}

export default Parent;

子组件(Child.ts)

# Child.ts
interface ChildInterface {
  count: number;
  setCount: (params: ChildInterface["count"]) => void;
}

interface ChildProps extends React.FC {}

const Child: ChildProps = (props) => {
  let { count, setCount } = props;
  return (
    

       {
          setCount(++count);
        }}
      >
        按钮
      
    
  );
};

export default Child;

子组件(newChild.ts) 第二种写法

# newChild.ts
import React from "react";

interface ChildProps {
  count: number;
  setCount: (params: ChildProps["count"]) => void;
}

class Child extends React.Component {
  render() {
    let { count, setCount } = this.props;
    return (
      

         {
            setCount(++count);
          }}
        >
          按钮
        
      
    );
  }
}

export default Child;