如果是传递多个参数 可以通过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>;
}