React之组件通信

父传子

import { useState } from "react";
// 导入组件
import InputComponents from "./app";

const RenderIndex = () => {
  const [inputVal, setInputVal] = useState("");

  const onChangeValue = (e) => {
    console.log("e=====>>>", e);
    setInputVal(e);
  };

  return (
    <>
      <div style={{ marginBottom: 20 }}>{inputVal}</div>
      // 引入组件并传值
      <InputComponents
        placeholder="传input默认值"
        onChangeValue={(e) => onChangeValue(e)}
      />
    </>
  );
};

export default RenderIndex;

const RenderApp = ({ placeholder, value, onChangeValue }) => {
  return (
    <input
      placeholder={placeholder}
      onChange={(e) => onChangeValue(e.target.value)}
    />
  );
};

export default RenderApp;

子传父

import React, { useState } from "react";

import Child from "./app";
// 父组件
const ParentCom = () => {
  const [count, setCount] = useState(0);

  // 获取子组件传过来的value值并设置到count，val参数就是子组件的value值
  const getChildrenValue = (val) => {
    setCount(val);
  };

  return (
    <div>
      <h2>父组件</h2>
      <p>获取子组件传过来的值：{count}</p>
      {/* 这里是重要代码，向子组件传递getValue这个prop，它的值是一个回调函数 */}
      <Child getValue={getChildrenValue} />
    </div>
  );
};

export default ParentCom;

import React, { useState } from "react";

// 子组件
const ChildrenCom = (props) => {
  const [value, setValue] = useState(0);

  const addValue = () => {
    console.log("props=====>>>", props);
    setValue(value + 1);
    // 向父组件传递每次递增的value值
    props.getValue(value + 1);
  };

  return (
    <div>
      <h4>子组件</h4>
      <button onClick={addValue}>点击改变子组件的value值：{value}</button>
    </div>
  );
};

export default ChildrenCom;

兄弟组件

• 在根目录创建 context/index 文件

import React from "react";

export const PageWraperContext = React.createContext({});

• 父组件

import { PageWraperContext } from "src/context";
import React, { useState } from "react";
import Child1 from "../Brother";
import Child from "../Son";

const Father = () => {
  const [left, set_left] = useState(0);
  const [right, setRight] = useState(0);

  const renderChild = () => {
    return (
      <PageWraperContext.Provider value={{ left, set_left, right, setRight }}>
        <Child />
        <Child1 />
      </PageWraperContext.Provider>
    );
  };

  return (
    <div>
      <span>我的父组件</span>
      {renderChild()}
    </div>
  );
};
export default Father;

• 子组件 1

import { PageWraperContext } from "@/context";
import React, { useContext } from "react";
const Child = () => {
  const { left, set_left } = useContext(PageWraperContext);

  const clickLeft = () => {
    set_left(left + 1);
  };

  const RenderChild1 = () => {
    console.log("child1==>left==>", left);
    return (
      <div>
        <div>我是子组件1:{left}</div>
        <button onClick={clickLeft}>点击left次数 </button>
      </div>
    );
  };

  return RenderChild1();
};
export default Child;

• 子组件 2

import { PageWraperContext } from "@/context";
import React, { useContext, useMemo } from "react";
const Child = () => {
  const { right, setRight } = useContext(PageWraperContext);

  const clickRight = () => {
    setRight(right + 1);
    console.log("child1==>right==>", right);
  };

  const RenderChild2 = () =>
    useMemo(() => {
      console.log("child1==>right==>", right);
      return (
        <div>
          <div>我是子组件2:{right}</div>
          <button onClick={clickRight}>点击Right次数 </button>
        </div>
      );
    }, [right]);

  return RenderChild2();
};
export default Child;

跨组件（爷传孙组件）

• 父组件

import { PageWraperContext } from "@/context";
import React, { useState } from "react";
import Child from "../Son";

const Father = () => {
  const [left, set_left] = useState(0);
  const [right, setRight] = useState(0);

  const renderChild = () => {
    return (
      <PageWraperContext.Provider value={{ left, set_left, right, setRight }}>
        <Child />
      </PageWraperContext.Provider>
    );
  };

  return (
    <div>
      <span>我的父组件</span>
      {renderChild()}
    </div>
  );
};
export default Father;

• 子组件

import React from "react";
import Child1 from "../Brother";

const Child = () => {
  const renderChild = () => {
    return <Child1 />;
  };

  return (
    <div>
      <span>我的子组件</span>
      {renderChild()}
    </div>
  );
};
export default Child;

• 孙组件

import { PageWraperContext } from "@/context";
import React, { useContext, useMemo } from "react";

const GrandSon = () => {
  const { right, setRight } = useContext(PageWraperContext);

  const clickRight = () => {
    setRight(right + 1);
    console.log("child1==>right==>", right);
  };

  const RenderChild2 = () =>
    useMemo(() => {
      console.log("child1==>right==>", right);
      return (
        <div>
          <div>我是孙子组件:{right}</div>
          <button onClick={clickRight}>点击Right次数 </button>
        </div>
      );
    }, [right]);

  return RenderChild2();
};
export default GrandSon;