React中父组件向子组件实现的简单通信

// ParentComponent.js
import React, { useState } from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const [sqInfo, setSqInfo] = useState({
    name: "小明",
    age: 20,
    gender: "男"
  });

  const handleButtonClick = () => {
    setSqInfo({
      ...sqInfo,
      age: sqInfo.age + 1
    });
    console.log("父组件按钮被点击");
  };

  return (
    <div>
      <ChildComponent sqInfo={sqInfo} onButtonClick={handleButtonClick} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from "react";

const ChildComponent = ({ sqInfo, onButtonClick }) => {
  return (
    <div>
      <p>{sqInfo.name}</p>
      <p>{sqInfo.age}</p>
      <p>{sqInfo.gender}</p>
      <button onClick={onButtonClick}>子组件按钮</button>
    </div>
  );
};

export default ChildComponent;

在React中，父组件向子组件通信可以通过props进行实现。父组件可以将数据或函数作为props传递给子组件，子组件可以通过props接收并使用这些数据或函数。

在这个示例中，ParentComponent是父组件，ChildComponent是子组件。

在父组件中，我们定义了一个名为sqInfo的变量，它包含要传递给子组件的数据。然后，我们定义了一个名为onButtonClick的函数，它将作为props传递给子组件。

在父组件的返回部分，我们将sqInfo和onButtonClick作为props传递给子组件ChildComponent。

在子组件中，我们通过接收props的方式获取父组件传递过来的数据和函数，并在组件中使用它们。在这个示例中，我们通过{sqInfo.?}来显示父组件传递过来的数据，并将onButtonClick作为按钮的点击事件处理函数。当然也可以直接用props进行接收。

import React from "react";

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.sqInfo.name}</p>
      <p>{props.sqInfo.age}</p>
      <p>{props.sqInfo.gender}</p>
      <button onClick={props.onButtonClick}>子组件按钮</button>
    </div>
  );
};

export default ChildComponent;

这样，父组件就可以向子组件传递数据和函数，并且子组件可以使用它们来进行相应的操作。