如何通過單擊頁面上的按鈕添加選項並將選項添加到另一個頁面中的 select 標簽？

Question

我正在制作一個有 2 個頁面的聊天應用程序。 一頁顯示 select 下拉標簽中默認可用的聊天室，另一頁允許您創建自己的聊天室。

我願意做的是將自定義房間的名稱添加到 select-dropdown 標簽中。 我試圖將 appendChild 房間的名稱附加到 select 標簽，但它顯示“未捕獲的類型錯誤：無法讀取 null 的屬性‘appendChild’”。 任何人都可以給我任何建議來幫助我嗎？ 感謝閱讀。 欣賞它...

Answer 1

您必須有一個存儲在父組件中的公共 state，當 CustomRoom 准備就緒時，它會設置名稱，然后 RoomsDropdown 由於新屬性而重新呈現。

function Rooms () {
  const [customRoomName, setCustomRoomName] = useState()

  return (
    <>
      <RoomsDropdown customRoomName={customRoomName} />
      <CustomRoom onNameChange={setCustomRoomName} />
    </>
  )
}