1.父传子

首先在父组件中将要传递的数据动态绑定到子组件的标签上

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from '@/App';
import * as serviceWorker from './serviceWorker';
import Movies from "./components/movies"
let user={
  name:"张三",
  age:18
}
ReactDOM.render(
  //这里就是将user绑定到
<Movies {...user}></Movies>,
  document.getElementById('root')
);
serviceWorker.unregister();

在子组件中需要定义props的类型才可以使用

import React from 'react';
//定义类型,Readonly表示只读
type IProps=Readonly<{
    name:string,
    age:number;
}>
//这里的React.Component<p,s>，p这里的范型表示对props进行约定,s对state进行约定
class movies extends React.Component<IProps> {
    render() {
        return (
            <div>
               {this.props.name}
               {this.props.age}
            </div>
        );
    }
}
export default movies;

2.子传父

1.在父组件中申明一个方法接受子组件传递过来的数据

  //因为是ts,所以这里传过来的数据类型需要进行定义
const fromChid = (obj:{user:string,content:string}) => {
    console.log("接收到子组件传递过来的数据",obj);
  };

2.在父组件使用子组件时将该函数传递给子组件

import React, { FC, useState } from "react";
import Cmittem from "@/components1/cmittem";
import CmtBox from "./CmtBox";
const Cmtlist: FC<{}> = (props) => {
  const fromChid = (obj:{user:string,content:string}) => {
    console.log("接收到子组件传递过来的数据",obj);
  };
  return (
    <div>
      <CmtBox func={fromChid}></CmtBox>
    </div>
  );
};
export default Cmtlist;

3.在子组件的点击事件中触发父组件传递过来的方法
这里使用ts，因此需要定义传递过来的函数类型，以及函数内的参数类型

import React, { FC, useState } from "react";
type IProps={
    func:(obj:{user:string,content:string})=>void
}
const CmtBox: FC<IProps> = (props) => {
  const [name, setName] = useState("");
  const [content, setContent] = useState("");
  const changeHandler = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    if (e.target.id === "name") {
      setName(e.target.value);
    } else {
      setContent(e.target.value);
    }
  };
  //在子组件中点击事件触发父组件传递过来的方法
  const postComment=()=>{
    //这里入参两个文本框输入的值
     props.func({user:name,content})
  }
  return (
    <div>
      <div className="boxItem">
        <label htmlFor="name">请输入用户名</label>
        <input type="text" id="name" value={name} onChange={changeHandler} />
      </div>
      <div className="textAreaItem">
        <label htmlFor="content">请输入评论内容</label>
        <textarea id="content" value={content} onChange={changeHandler} />
      </div>
      <input type="button" value="发表评论" onClick={postComment}/>
    </div>
  );
};
export default CmtBox;