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

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

我們不能使用事件將子元件的props 傳送給其父元件嗎React.js？

雖然有其他解決方案，但它們經常忽略一個基本點。父母已經擁有他們傳給孩子的道具。因此，孩子們不需要將這些道具送回父母。

更好的方法

子組件：
子組件是保持簡單。

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

父級（單一子級）：
利用發送給子級的 prop，父級處理點擊事件。

const Parent = ({ childText }) => {
  const handleClick = (event) => {
    // Parent already has the child prop.
    alert(`Child button text: ${childText}`);
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return <Child text={childText} onClick={handleClick} />;
};

父級（子級清單）：
父級管理多個子級，同時又不會失去對必要資訊的存取。

const Parent = ({ childrenData }) => {
  const handleClick = (childData, event) => {
    alert(
      `Child button data: ${childData.childText} - ${childData.childNumber}`
    );
    alert(`Child HTML: ${event.target.outerHTML}`);
  };

  return (
    <div>
      {childrenData.map((childData, index) => (
        <Child
          key={index}
          text={childData.childText}
          onClick={e => handleClick(childData, e)}
        />
      ))}
    </div>
  );
};

此策略尊重封裝性，並透過避免依賴來減少耦合孩子的內部結構。

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