無論是在 D15 還是 D16，都是在同一層進行修改資料，或是使用參數從「親層」（Parent，個人比較喜歡翻成「親層」，而不是「父層」）傳到「子層」（Child）。那反過來可不可以用呢？讓我們看看要如何從子層修改到親層。
（待完成）

從親層取得資料

這邊建立兩層資料，首先在親層－Parent.jsx 顯示要輸入的資料，其中包含了姓名與年齡。

import { useState } from "react";
import ChildLayer from "./Child";

function PropSample() {
  let [name, setName] = useState(0);
  let [counter, setCounter] = useState(0);

  const handleName = (e) => {
    const newStr = e.target.value;
    setName(newStr);
  };


  const handleCounter = (e) => {
    const newStr = e.target.value;
    setCounter(newStr);
  };

  return (
    <div>
      <h1>修改上下層資料</h1>
      <div>
        <h2>原始資料</h2>
      </div>
      <div>
        <label>姓名：</label>
        <input itemType="text" onChange={handleName}></input>
      </div>
      <div>
        <label>年齡：</label>
        <input itemType="text" onChange={handleCounter}></input>
      </div>
      <div>
        <p>
          Hello, {name} 是 {counter} 歲
        </p>
      </div>
      <div>
        <ChildLayer name={name} counter={counter}></ChildLayer>
      </div>
      <div>
        <p>
          Bello, {name} 是 {counter} 歲
        </p>
      </div>     
    </div>
  );
}

export default PropSample;

接著建立子層－Child.jsx，顯示要出現的資料：

function ChildLayer(props) {
  const { name, counter } = props;

  return (
    <div>
      <div>
        <h2>子層</h2>
      </div>
      <div>
        <label>
          Hi, {name} 是 {counter} 歲
        </label>
      </div>
    </div>
  );
}

export default ChildLayer;

在子層直接修改 props 資料

當可以顯示後，在子層的物件 ChildLayer 進行修改資料，修改從親層傳下來的姓名與年齡，象徵我們進行修改親層的資料。

function ChildLayer(props) {
  let { name, counter } = props;
  name = "睫毛";
  counter = props.counter++;

  return (
    <div>...（省略）
    </div>
  );
}

結果發生錯誤，錯誤訊息說我們無法修改這個物件。這是因為子層無法修改上層的資料，在 props 傳值的方式為上到下，無法反過來用。

Uncaught TypeError: Cannot assign to read only property 'counter' of object '#<Object>'

這時要修改，則要用變數另存值，然後修改這個值。但要修改親層，該如何是好呢？

後記

在這邊有點複雜，所以先分成兩個部分敘述，首先是上對下可以用 props，但是反過來無法。這時候只能使用 handle 囉！