如何通过 refs 访问子组件函数

Question

React 的文档指出父组件可以通过 refs 访问组件函数。参见：https://facebook.github.io/react/tips/expose-component-functions.html

我试图在我的应用程序中使用它，但是在调用子函数时运行出现 "undefined is not a function" 错误。我想知道这是否与为 React 使用 ES6 格式有关类因为我没有看到我的代码和文档之间有任何其他差异。

我有一个类似于以下伪代码的对话框组件。 Dialog有一个调用save()的"Save"按钮，需要调用子Content组件中的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
  }
}

我可以将一个 prop (saveOnNextUpdate) 向下传递给 Content，然后在它为真时执行保存，但我宁愿弄清楚如何让上面 React 文档中详述的方法起作用。

关于如何使 doc 方法起作用或以不同方式访问子组件功能的任何想法？

Answer 1

事实证明，m90 是对的——这完全是另一个问题。我发布了解决方案，以防将来有人遇到同样的问题。

我的应用程序是用 Redux 构建的，问题源于使用 react-redux connect 函数将组件连接到 store/global 状态。出于某种原因，导出组件并将其连接到商店会导致无法访问其中的功能。为了解决这个问题，我不得不从 Content 中删除对全局状态的所有使用，以便我可以将其导出为 "dumb" 组件。

为了更清楚，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() 神奇地起作用了。

Answer 2

Redux 连接接受一个选项参数作为第四个参数。在此选项参数中，您可以将标志 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);

在此处阅读更多相关信息：https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

值得阅读这篇关于引用的使用的文章，并考虑是否有更好的方法：https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs

Answer 3

另一种方法是使用其他道具名称（ref 除外）。我发现如果您使用 styled-components 或 emotion 这样的库，这也很有效例如在连接的 MyComponent:

中

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

如何通过 refs 访问子组件函数

How to access child component functions via refs

javascript

reactjs

redux