react 组件通信

如果是传递多个参数 可以通过props 

父组件

• 不加花括号时只能传递字符串字面量
• 加花括号可以传递任意JavaScript值，包括数字、布尔值、对象等

function ParentComponent() {

        return (

                <ChildComponent param1="value1" param2="value2" param3={3} />

        );

}

子组件：

function ChildComponent(props) {

return (

        <div>

                <p>{props.param1}</p>

                <p>{props.param2}</p>

                <p>{props.param3}</p>

        </div>

);

}

如果是单个的话：

父组件：

import React from 'react';

import ChildComponent from './ChildComponent';

function ParentComponent() {

const data = { name: 'John', age: 30 };

        return <ChildComponent data={data} />;

}

export default ParentComponent;

子组件：

import React from 'react';

function ChildComponent({ data }) {

        return <div>{data.name} is {data.age} years old.</div>;

}

export default ChildComponent;

事件传递

父组件：

import React, { useState, useCallback } from 'react';

function ParentComponent() {

        const [dataFromChild, setDataFromChild] = useState(null);

        const handleChildEvent = useCallback((data) => {

                setDataFromChild(data);

                console.log("Received data from child:", data);

        }, []); // 依赖项为空，因为不需要重新创建回调函数

        return <ChildComponent onChildEvent={handleChildEvent} />;

}

子组件：

function ChildComponent({ onChildEvent }) {

const handleClick = () => {

        const data = "Some data from child";

        onChildEvent(data); // 调用父组件传递的回调函数，并传递数据

};

return <button onClick={handleClick}>Click me</button>;

}