可以在反应中将类组件引用传递给子组件吗答案

【问题标题】：Is it ok to pass class component reference to child component in react可以在反应中将类组件引用传递给子组件吗
【发布时间】：2020-10-26 08:21:25
【问题描述】：

class Parent extends React.Component {

    handler = (event) => {
        this.setState(state => ({ count: state.count + 1 }));
    }

    render() {
        return (
          <div>
            {this.state.count}
            <Child Parent={this} />
          </div>
        );
    }
}

function Child(props) {
    return <button onClick={props.Parent.handler}>increment count</button>
}

我用过这种模式几次，没有发现任何后果，有人认为遵循这种模式有什么危害吗？

【问题讨论】：

不，这是错误的模式。您只需要发送您想在子组件中使用的属性。
你怎么看，这会是错误的模式吗？
每次父组件发生更改时，您的子组件都会重新渲染。在您的情况下，拥有子组件根本没有意义（好处）！
这总是正确的，除非我们记忆孩子，孩子将在每次渲染父母时重新渲染
关于您只发送必需属性的观点，有时要发送的属性太多，让人思考，如果我可以直接发送类实例怎么办，这就是问题的目的跨度>

标签： javascript reactjs pass-by-reference setstate

【解决方案1】：

有时要发送的属性太多

在我看来，如果Child 几乎使用了Parent 中的所有属性，也许：

Child 是 Parent 吗？
将Child拆分为多个Child，例如Child1、Child2？

而且，如果你将Parent 传递给Child，它就不是语义的。当我在其他地方使用 Child 时，我不知道它需要哪些属性。

期待更多讨论。 :)

【讨论】：

你的评论没问题，但仍然没有触及问题的本质，你的3个论点没有吸引力
@AkshayVijayJain 好吧，也许你有自己的特殊场景。但我仍然坚持只公开所需的接口是必要的。如果暴露了不必要的接口，就会有不可控的风险，在我看来是非常危险的。毕竟，你无法保证别人如何使用它们。
这个说法似乎有点成立，但是child实际上是Parent的一个child，那个child没有parent就没有存在，我的意思是说，Parent可以移除那个child组件，如果它做了什么额外并实施完成所需工作的新孩子

【解决方案2】：

我正在添加一些我们通过这种模式获得的好处，并且我假设我的有限知识是可以的

我们可以直接在 child 中访问 props 和 Parent 的状态
可以使用Parent.setState从子级更改父级状态
可以访问父类中定义的其他函数，从而减少将所有内容作为道具传递

我觉得这是一个更好的解决方案，因为 Parent 引用永远不会改变，因此不会导致不必要的 child 重新渲染，并且我们不需要记住传递给 child 的 Parent 函数引用

虽然 OO 专家可能会提出代码异味的论点，即我们允许子级修改父级的属性，但对于 React，我们可以放心地忽略它，因为无论如何我们都将整个 redux 存储传递给每个组件，并且任何更改redux store，同时影响这么多组件。 ---- 以下是我在 freecodeCamp 上发布的同一个问题除外。 ------ 关于代码异味，只是因为一个类正在修改其他类的属性。我们必须三思而后行。

状态的整个概念都在那里，因此可以在内部进行修改，

无论是类本身修改还是赋予某个子类修改的权利——这有点类似，只是增加了委托

始终要注意，父母可以完全控制孩子。如果孩子没有按照父母的方式行事，孩子可以由父母代替。

再补充一点，我们无论如何都赋予每个组件通过 useDispatch 修改整个 redux 存储的权利，因此代码异味的论点对于 React 本身来说并不那么强烈

https://forum.freecodecamp.org/t/is-it-ok-to-pass-class-component-reference-to-child-component-in-react/408341/7

【讨论】：