React组件传值方法

React组件传值方法

在React中，有几种主要的方式可以在组件之间传递数据：

1. Props（从父组件到子组件）

这是最基本和最常用的方法。父组件可以将数据作为props传递给子组件。

// 父组件
function Parent() {const data = "Hello from parent";return <Child message={data} />;
}// 子组件
function Child(props) {return <p>{props.message}</p>;
}

2. 回调函数（从子组件到父组件）

父组件可以将一个函数作为prop传递给子组件，子组件可以调用这个函数来向父组件传递数据。

// 父组件
function Parent() {const handleChildData = (data) => {console.log("Data from child:", data);};return <Child onChildData={handleChildData} />;
}// 子组件
function Child(props) {const sendDataToParent = () => {props.onChildData("Hello from child");};return <button onClick={sendDataToParent}>Se