如何在 React.js 中將子 Props 傳遞給父級？

在React.js 中將子元件傳遞給父元件

Context

React 透過父元件和子元件之間提供了強大的通信機制。但是，在某些情況下，您可能想要將整個子元件及其 props 傳遞給父元件。當您想要將複雜的邏輯封裝在子級中並向父級提供更簡單的介面時，這非常有用。

關於子級到父級Prop 傳遞的擔憂

歷史上，一些開發人員建議使用事件將子props 傳遞給父級，但這種方法引起了對耦合和封裝的擔憂。直接在父元件中存取子元件的 props 和實作細節可能會使元件緊密耦合並阻礙重構工作。

建議方法

相反，建議利用現有的父 prop 機制來存取孩子的資料。這使得父級能夠利用它提供給子級的 props，從而避免需要從子級本身中檢索子級的 props。

使用類組件實現

子組件：

class Child extends Component {
  render() {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  }
}

家長組件：

class Parent extends Component {
  getInitialState() {
    return { childText: "Click me! (parent prop)" };
  }

  render() {
    return (
      <Child
        onClick={this.handleChildClick}
        text={this.state.childText}
      />
    );
  }

  handleChildClick(event) {
    const childText = this.state.childText;

    // Parent has access to child prop
    alert(`The Child button text is: ${childText}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  }
}

使用功能組件實現

子組件：

const Child = ({ onClick, text }) => {
  return <button onClick={onClick}>{text}</button>;
};

父組件組件：

const Parent = ({ childrenData }) => {
  const handleChildClick = (childData, event) => {
    const childText = childData.childText;
    const childNumber = childData.childNumber;

    // Parent has access to child prop
    alert(`The Child button data is: ${childText} - ${childNumber}`);

    // Parent has access to event target
    alert(`The Child HTML is: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData) => (
        <Child
          key={childData.childNumber}
          onClick={(event) => handleChildClick(childData, event)}
          text={childData.childText}
        />
      ))}
    </div>
  );
};

父組件組件：

父組件組件：父組件組件：透過擁抱React中現有的prop機制，您可以有效地在父子元件之間傳遞數據，而不會引入不必要的耦合或違反封裝原則。這種方法確保組件保持獨立和靈活，從而實現更清晰和更可維護的程式碼。

以上是如何在 React.js 中將子 Props 傳遞給父級？的詳細內容。更多資訊請關注PHP中文網其他相關文章！