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

How to access child component functions via refs

提问by MKeller

The docs for React state that component functions can be accessed by a parent component via refs. See: https://facebook.github.io/react/tips/expose-component-functions.html

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

I am attempting to use this in my application but run into an "undefined is not a function" error when the child function is called. I'm wondering if this has anything to do with using the ES6 format for React classes because I don't see any other differences between my code and the docs.

我试图在我的应用程序中使用它，但在调用子函数时遇到“未定义不是函数”错误。我想知道这是否与将 ES6 格式用于 React 类有关，因为我没有看到我的代码和文档之间有任何其他差异。

I have a Dialog component that looks like the following pseudocode. The Dialog has a "Save" button that calls save(), which needs to call the save() function in the child Content component. The Content component collects information from child form fields and performs the save.

我有一个类似于以下伪代码的 Dialog 组件。Dialog有一个“保存”按钮，调用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
  }
}

I could instead pass a prop (saveOnNextUpdate) down to Content and then execute save whenever it is true, but I would rather figure out how to get the method detailed in the React doc above to work.

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

Any ideas on how to get the doc approach to work or access the child component function in a different way?

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

采纳答案by MKeller

As it turns out, m90 was right -- this was a different issue entirely. I'm posting the solution in case someone runs into the same problem in the future.

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

My application is built with Redux, and the problem stems from using the react-redux connect function to connect a component to the store/global state. For some reason, exporting a component and connecting it to the store makes it impossible to access the functions inside of it. In order to get around this, I had to remove all use of global state from Content so that I could export it as a "dumb" component.

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

To be more clear, Content.js looked like this:

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

Removing the use of global state (and therefore the use of connect and mapStateToProps allowed me to export the component using:

删除全局状态的使用（因此使用 connect 和 mapStateToProps 允许我使用以下方法导出组件：

module.exports = Content;

Accessing this.refs.content.save() magically worked after doing this.

执行此操作后，访问 this.refs.content.save() 神奇地工作。

回答by Arne H. Bitubekk

Redux connect accepts an option parametre as the forth parameter. In this option parameter you can set the flag withRef to true. Then you can access functions to refs by using getWrappedInstance(). Like this:

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);

Read more about it here: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

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

Worth reading this article about use of refs and consider if there's better approaches: https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs

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

回答by Divyanshu Maithani

An alternative way to do this would be to use some other prop name (other than ref). I've found that this also works well if you're using a library like styled-componentsor emotionFor example in a connected MyComponent:

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

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