如何通过refs访问子组件函数
React的文档声明组件功能可以由父组件通过refs访问。请参阅：https://facebook.github.io/react/tips/expose-component-functions.html
我试图在我的应用程序中使用它，但是在调用子函数时遇到了"undefined is not a function“错误。我想知道这是否与使用React类的ES6格式有关，因为我看不到我的代码和文档之间有任何其他区别。
我有一个对话框组件，它看起来像下面的伪代码。该对话框有一个调用save()的"Save“按钮，该按钮需要调用子内容组件中的save()函数。内容组件从子表单字段收集信息并执行保存。
class MyDialog extends React.Component {
save() {
this.refs.content.save(); <-- save() is undefined
}
render() {
return (
<Dialog action={this.save.bind(this)}>
<Content ref="content"/>
</Dialog>);
}
}
class Content extends React.Component {
save() {
// Get values from child fields
// and save the content
}
}相反，我可以向下传递一个属性(saveOnNextUpdate)给Content，然后在它为真的时候执行保存，但我更愿意弄清楚如何让上面的React文档中详细描述的方法工作。
关于如何让doc方法工作或以不同的方式访问子组件函数，您有什么想法吗？
回答 3
Stack Overflow用户
发布于 2015-12-01 04:08:58
事实证明，m90是对的--这是一个完全不同的问题。我发布了解决方案，以防将来有人遇到同样的问题。
我的应用程序是使用Redux构建的，问题源于使用react-redux连接函数将组件连接到存储/全局状态。出于某些原因，导出组件并将其连接到存储区会导致无法访问其中的函数。为了解决这个问题，我不得不从内容中删除所有全局状态的使用，这样我就可以将它作为一个“哑巴”组件导出。
更清楚地说，Content.js看起来像这样：
var connect = require('react-redux').connect;
class Content extends React.Component {
save() {
// Get values from child fields
// and save the content
// Use of this.props.stateObject
}
}
function mapStateToProps(state) {
const {
stateObject
} = state;
return {
stateObject
};
}
module.exports = connect(mapStateToProps)(Content);删除全局状态的使用(因此使用connect和mapStateToProps允许我使用以下命令导出组件：
module.exports = Content;这样做之后，访问this.refs.content.save()就神奇地工作了。
Stack Overflow用户
发布于 2016-04-20 17:00:47
Redux connect接受选项参数作为第四个参数。在此选项参数中，您可以将标志withRef设置为true。然后，您可以使用getWrappedInstance()访问refs函数。如下所示：
class MyDialog extends React.Component {
save() {
this.refs.content.getWrappedInstance().save();
}
render() {
return (
<Dialog action={this.save.bind(this)}>
<Content ref="content"/>
</Dialog>);
}
}
class Content extends React.Component {
save() { ... }
}
function mapStateToProps(state) { ... }
module.exports = connect(mapStateToProps, null, null, { withRef: true })(Content);值得阅读这篇关于refs用法的文章，并考虑是否有更好的方法：https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs
Stack Overflow用户
发布于 2018-02-19 17:57:56
另一种方法是使用其他属性名称(而不是ref)。我发现，如果您正在使用诸如styled-components或emotion之类的库，例如在连接的MyComponent中，也可以很好地工作
<MyComponent
...
innerRef={(node) => { this.myRef = node; }}
/>https://stackoverflow.com/questions/34004331
复制相似问题