react ts 组件之间的传值【函数式组件】

1.父组件向子组件传值【Props】

./src/components/parent.tsx

import { FC, useState } from "react";
import Child from "./child";
import styles from "./styles.module.css";
const Index: FC = () => {
  const [count, setCount] = useState<number>(0);
	
  const addCount = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h2>parent</h2>
      <h2>parent:{count}</h2>
      <button className={styles.button} onClick={addCount}>
        add count ++
      </button>

      <hr />
      <Child data={{ count, setCount }} />
    </>
  );
};

export default Index;

./src/components/child.tsx

import { FC } from "react";

const Index: FC<{
  data: {
    count: number;
    setCount: React.Dispatch<React.SetStateAction<number>>;
  };
}> = ({ data }) => {

  const { count, setCount } = data;

  const addtarget = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h2>child</h2>
      <h2>parent to child:{count}</h2>

      <button style={buttonchild} onClick={addtarget}>
        child-add ++
      </button>
    </>
  );
};

  const buttonchild = {
    color: "red",
    background: "skyblue",
    padding: "10px 20px",
    borderRadius: "4px",
  };

export default Index;

2.子组件向父组件传值 【callback function】

./src/components/interface.ts

interface propsCount {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
}

export type { propsCount };

./src/components/parent.tsx

import { FC, useState } from "react";
import Child from "./child";
import styles from "./styles.module.css";
import { propsCount } from "./interface";

const Index: FC = () => {
  const [pCount, setPcount] = useState<number>(0);

  const handleAddCount = (data: propsCount) => {
    const { count } = data;
    setPcount(count);
  };

  const addCount = () => {
    setPcount(pCount + 1);
  };

  return (
    <>
      <h2>parent</h2>
      <h2>child to parent:{pCount}</h2>
      <button className={styles.button} onClick={addCount}>
        add count ++
      </button>

      <hr />
      <Child onAddCount={handleAddCount} />
    </>
  );
};

export default Index;

./src/components/child.tsx

import { FC, useEffect, useState } from "react";
import { propsCount } from "./interface";

const Index: FC<{
  onAddCount: ({ count, setCount }: propsCount) => void;
}> = ({ onAddCount }) => {
  const [count, setCount] = useState<number>(0);

  const addtarget = () => {
    setCount(count + 1);
    onAddCount({ count, setCount });
  };

  useEffect(() => {
    onAddCount({ count, setCount });
  }, [{ count, setCount }]);

  return (
    <>
      <h2>child:{count}</h2>

      <button style={buttonchild} onClick={addtarget}>
        child-add ++
      </button>
    </>
  );
};

const buttonchild = {
    color: "red",
    background: "skyblue",
    padding: "10px 20px",
    borderRadius: "4px",
  };

export default Index;

3.Context Api

./src/components/interface.ts

interface propsCount {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
}

export type { propsCount };

./src/components/parent.tsx

import { FC, createContext, useState } from "react";
import Child from "./child";
import styles from "./styles.module.css";
import { propsCount } from "./interface";

const initialPropsCount = {
  count: 0,
  setCount: () => {},
};

export const MyContext = createContext<propsCount>(initialPropsCount);

const Index: FC = () => {
  const [count, setCount] = useState<number>(0);

  const addCount = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h2>parent:{count}</h2>

      <button className={styles.button} onClick={addCount}>
        add count ++
      </button>

      <hr />
      <MyContext.Provider value={{ count, setCount }}>
        <Child />
      </MyContext.Provider>
    </>
  );
};

export default Index;

./src/components/child.tsx

import { FC, useContext } from "react";
import { MyContext } from "./parent";
const Index: FC = () => {
  const data = useContext(MyContext);
  const { count, setCount } = data;

  const addtarget = () => {
    setCount(count + 1);
  };

  return (
    <>
      <h2>child</h2>
      <h2>parent to child:{count}</h2>
      <button style={buttonchild} onClick={addtarget}>
        child-add ++
      </button>
    </>
  );
};

const buttonchild = {
  color: "red",
  background: "skyblue",
  padding: "10px 20px",
  borderRadius: "4px",
};

export default Index;