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>;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值