將 state 從子組件提升到父組件

Question

我有 2 個子組件：一個Categories select 和一個Search輸入文本並提交按鈕。 他們都有自己的 state。我必須在父頁面中使用這兩個組件。 我需要知道我必須在哪個類別中進行搜索，為了實現這一點，我認為我應該解除 state，以便家長處理它。

基本上我從子組件中刪除了 state 並將其放在父組件上，最后得到這樣的東西（簡化代碼）：

export default ParentPage = () => {

  const [searchString, setSearchString] = useState("");
  const [category, setCategory] = useState(0);

  const onSearch = () => {
    // search for searchString in the selected category
  }

  return (
    <>
      <Categories category={category} setCategory={setCategory} />
      <Search searchString={searchString} setSearchString={setSearchString} onSearch={onSearch} />
    </>
  )
}

這是一個好方法嗎？ 看起來有點冗長，有沒有更緊湊的方式將 state 和 setState 傳遞給子組件？

Answer 1

代替這個：

<Categories category={category} setCategory={setCategory} />
<Search searchString={searchString} setSearchString={setSearchString} />

你也可以使用下面的，因為你保留了與狀態相同的名稱道具：

<Categories {...{ category , setCategory }} />
<Search {...{ searchString , setSearchString }} />

---

注意：但是我從提供的代碼中看不到提升 state 的任何目的，所以不能說什么。

---

代碼更新后，您可以這樣做：

export default ParentPage = () => {

  const [searchString, setSearchString] = useState("");
  const [category, setCategory] = useState(0);

  const onSearch = () => {
    // search for searchString in the selected category

    // if you are filtering category and calling setCategory, then it's all good
    // else you need to pass `searchString` in `Categories` to filter the data

  }

  return (
    <>
      <Categories {...{category , setCategory }} />
      <Search {...{searchString , setSearchString , onSearch}} />
    </>
  )
}

Answer 2

您好，我在這里准備了一個完整的示例。 您需要使用回調將子項 state 從子項傳遞給父項，然后您在父項上收到子項的 state 並將該 state 發送給另一個子項。

父組件

import React, {useEffect, useState} from 'react';
import Child from "./Child";
import Sibling from "../Sibling";

function CParent(props) {

    const [status, setStatus] = useState(false);

    function setOpeningValue(status) {
        console.log('From Child to Parent:' + status);
        setStatus(status);
    }
    return (
        <div>
            <Child setOpeningValue={setOpeningValue}/>
            <Sibling status={status}/>
        </div>
    );
}
export default CParent;

子組件

import React, {useEffect, useState} from 'react';

// Child to Parent communication
function Child(props) {
    const {setOpeningValue} = props;
    const [isOpen, setOpen] = useState(false);

    function clickHandler() {
        setOpen(!isOpen);
        setOpeningValue(`changes is ${!isOpen}`);
    }
    return (
        <div>
            <button onClick={clickHandler}>Open</button>
        </div>
    );
}
export default Child;

兄弟組件

import React, {useEffect, useState} from 'react';

function Sibling(props) {
    const {status} = props;
    const [isOpen, setOpen] = useState(false);

    return (
        <div>
            From Child to Parent to Another Child (Sibling) {status}
        </div>
    );
}
export default Sibling;