从子组件访问父组件中的状态答案

【问题标题】：Accessing state in a parent component from a child component从子组件访问父组件中的状态
【发布时间】：2021-10-27 15:28:17
【问题描述】：

我目前正在通过使用回调访问子组件中父组件的状态，但我不太确定它是如何工作的：

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），但是当我查找这个概念时，我找不到很好的解释。

【问题讨论】：

标签： javascript reactjs callback

【解决方案1】：

您的实施是正确的方法。您传递给子组件的这些函数不仅仅是回调，而是调用道具，我邀请您阅读有关它们的文档。

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" >

【讨论】：

哦，我明白了。我已经习惯了静态语言，所以我很难理解这样一个事实，即父组件可以通过传递对函数的引用来改变子组件的状态。这只是由于 React 而在幕后发生的事情吗？在 React 之外，这可以用 vanilla javascript 完成吗？
最后一个问题：我以为道具是只读的？孩子不是调用了一个函数来改变编辑模式中属性的状态吗？
那么 react 本身是用 Javascript 编码的，所以它只是一种创建的语法。但它有点在最后将一个函数或回调传递给另一个函数。
道具确实是只读的。在这里，您阅读了它自己触发状态操作的函数（editMode 是状态而不是道具）。但是激活一个功能正在读取它。您没有将函数重新分配给另一个值。

【解决方案2】：

你作为 props 传递给子组件的父组件的状态不会随着父组件的状态改变而更新。因此，您需要一个回调函数来在任何给定时间访问父级的当前状态。此外，如果您在父子组件或多个组件中有依赖状态值，如果您使用 redux 进行状态管理，则可以将其移动到 reducer。

【讨论】：