Javascript 如何通过引用访问子组件函数

React的文档说明父组件可以通过REF访问组件功能。见：

我试图在我的应用程序中使用它，但在调用子函数时遇到“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
  }
}

类MyDialog扩展了React.Component{
保存（）{
这个.refs.content.save（）；事实证明，m90是正确的——这是一个完全不同的问题。我将发布解决方案，以防将来有人遇到相同的问题

我的应用程序是用Redux构建的，问题源于使用react-Redux-connect函数将组件连接到存储/全局状态。出于某种原因，导出组件并将其连接到存储使其无法访问其中的函数。为了避免这一问题，我不得不取消对全局sta的所有使用从内容中删除，以便将其导出为“哑”组件

更清楚地说，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;

执行此操作后，访问此.refs.content.save（）会神奇地工作。
Redux connect接受一个选项parameter作为第四个参数。在此选项参数中，您可以使用REF将标志设置为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);

类MyDialog扩展了React.Component{
保存（）{
this.refs.content.getWrappedInstance（）.save（）；
}
render（）{
返回(
);
}
}
类内容扩展了React.Component{
保存（）{…}
}
函数MapStateTrops（状态）{…}
module.exports=connect（MapStateTrops，null，null，{withRef:true}）（内容）；

请在此处阅读更多信息：

值得一读的是关于使用RIFS的文章，并考虑是否有更好的方法：
< P>。另一种方法是使用其他的道具名称（除了<代码> REF）。。我发现，如果您在连接的
MyComponent
中使用类似
样式化组件
或
情感
的库，这也很有效：

<MyComponent
  ...
  innerRef={(node) => { this.myRef = node; }}
/>

{this.myRef=node；}
/>
您使用的react版本是什么？您的伪示例有效：因此这可能是另一个问题。您可以发布更多真实代码吗？对于包装组件（连接到redux或其他插件的组件）。我们需要使用getWrappedInstance（）获取包装的实例，然后我们可以访问该组件的状态、引用和方法。下面是解释它的视频-您可能希望将此作为一个问题添加到redux repo中。似乎可以修复一些问题。实际上，这是有意义的。React redux的connect（）函数围绕您自己实际编写的包装器组件创建一个新的包装器组件。包装器组件没有save（）函数，因此该方法不起作用。在这种情况下，您最好使用传递回调方法。connect（）函数确实为第三个参数设置了withRef标志，这可能是您的问题的解决方案。坦率地说，让父组件调用其子组件上的方法似乎有点反作用。我来看看David建议的withRef标志。如果使用该标志有效，我看不出有任何理由将其作为redux问题添加。否则我会继续添加它。谢谢大家的帮助！@ArneHB有下面的解决方案。string ref不推荐。如果可以的话，我会竖起大拇指。我花了几个小时寻找解决方案。这就解决了。：）