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 (
    

      
    
  );
}

export default ParentComponent;

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

const ChildComponent = ({ sqInfo, onButtonClick }) => {
  return (
    

      
{sqInfo.name}
      
{sqInfo.age}
      
{sqInfo.gender}
      子组件按钮
    
  );
};

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 (
    

      
{props.sqInfo.name}
      
{props.sqInfo.age}
      
{props.sqInfo.gender}
      子组件按钮
    
  );
};

export default ChildComponent;

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