当前位置：首页 > article >正文

React组件传值方法

article 2024/10/20 23:16:10

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

查看全文

http://www.kler.cn/news/353770.html