Javascript 反应-通过'；这'；作为道具

这样做有没有副作用我看不出来

class App extends React.Component {
    hello() {
        console.log("hello")
    }

    render() {
        return <Layout app={this}>
    }
}

类应用程序扩展了React.Component{
你好（）{
log（“你好”）
}
render（）{
返回
}
}

因此，稍后我可以从Layout？

回答中参考this.props.app.hello（和其他） 将函数作为道具传递并没有错，正如我在您的示例中所看到的，您唯一需要做的就是确保您的函数绑定到当前组件，如下所示

参考文献 这是不安全的

React将不知道如何监视更改，因此您可能会错过重新渲染。React使用

==

检查状态更改，并且

App

将始终是

==

到

App

，即使状态或属性更改

举个例子：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.setState（{text:'default value'}）；
}
你好（）{
this.setState（{…this.state，文本：'new value'}）；
}
render（）{
返回(
);
}
}
类布局扩展了React.Component{
render（）{
返回{this.app.state.text}
}
}

单击父div时，

this.hello

将被调用，但子组件将不会检测到状态更新，并且可能不会按预期重新渲染。如果它确实重新渲染，那将是因为父对象重新渲染了。依赖于此将导致未来的bug

更安全的模式是只将需要的东西传递到

道具中

：

类应用程序扩展了React.Component{
//...
render（）{
返回(
);
}
}
类布局扩展了React.Component{
render（）{
返回{this.props.text}
}
}

---

这将按预期更新。

我看到很少有案例说明您为什么应该这样做。也许您正在寻找API？我不确定，但如果您试图使用函数，为什么不导出和导入？或者可以尝试使用redux？您可以传递所有类似的道具，而且

您将向您的组件发送不必要的数据。这并不意味着数据必须传递，我只是传递对我的应用程序类的引用。我发现它比直接传递我想要使用的函数更方便（不需要绑定等等）。我非常喜欢使用上下文的想法，因为它是用于管理区域设置（以及可能经过身份验证的状态），所以感谢@Bátido。他们不是在传递函数，而是在传递整个类组件。是的，不知道是谁对此投了赞成票，与问题无关。我感谢您的评论@LionelRowee，正如“评论是为了要求澄清，留下建设性的批评”。我想通过回答这个问题来解决问题。如果你有建设性的批评，请让我知道，以提高我的技术技能。我很高兴进一步阐述我的评论。这个回答中的信息是正确的（事实上，将函数作为道具传递并没有错），但问题不是关于函数。而是关于将对基于类的组件的引用作为道具传递，特别是将

this

传递给子级。传递类是不安全的，因为类引用是对可变对象的引用，且引用从不更改。React依赖于被视为不可变的状态，因此传递作为道具的可变类实例可能会导致问题。希望这有帮助！