從子組件訪問父組件中的狀態

Question

我目前正在通過使用回調訪問子組件中父組件的狀態，但我不太確定它是如何工作的：

export default function parentComponent({ type }) {

    const
         [inEditMode, setInEditMode] = useState(false)

return (
        <>
        
            <div className={containerCssClasses}>
                    <childComponent onCancel={() => { setInEditMode(false); }} type={type} />

在這里，父組件正在調用子組件並將匿名函數傳遞給組件以供其回調。

在子組件中：

function childComponent({onCancel}) {
 return (
    <div>
        <Button onClick={() => onCancel()} variant="link" >
    </div?
 );
}

如果子組件無法訪問 setInEditMode()，我對它如何能夠正常工作感到有些困惑。 我了解將函數傳遞給另一個函數（在本例中為組件）時，它是通過引用傳遞的。 但這是否一定意味着該函數中的所有變量也是通過引用傳遞的？ 我是反應（和 javascript）的新手，但是當我查看這個概念時，我找不到一個好的解釋。

Answer 1

您的實施是正確的方法。 除了回調之外，您傳遞給子組件的這些函數是 call props，我邀請您閱讀有關它們的文檔。

https://reactjs.org/docs/components-and-props.html

您還可以找到有關它的非常詳細的文章：

https://itnext.io/what-is-props-and-how-to-use-it-in-react-da307f500da0

無論您將從父級傳遞給子級的任何內容都可以在子組件中使用，就像在父級組件中調用一樣。

在你的情況下，孩子確實會觸發 setInEditMode(false)

由於您沒有將任何變量傳遞給它，因此您實際上可以這樣調用它：

<Button onClick={onCancel} variant="link" >

Answer 2

您作為道具傳遞給子組件的父組件的狀態不會隨着父組件的狀態更改而更新。 因此，您需要一個回調函數來在任何給定時間訪問父級的當前狀態。 此外，如果您在父子組件或多個組件中有依賴狀態值，如果您使用 redux 進行狀態管理，則可以將其移動到 reducer。