首页 文章

反应ES6 |如何通过refs访问子组件函数

提问于
浏览 次
29

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

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

我有一个Dialog组件，看起来像下面的伪代码 . Dialog有一个“Save”按钮，调用save（），需要调用子Content组件中的save（）函数 . Content组件从子表单字段中收集信息并执行保存 .

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，然后在它为真时执行save，但我宁愿弄清楚如何让上面的React doc中详述的方法工作 .

有关如何使doc方法工作或以不同方式访问子组件的任何想法？

javascript reactjs redux

3 回答

  • 48

    Redux connect接受选项参数作为第四个参数 . 在此选项参数中，您可以将标志withRef设置为true . 然后，您可以使用getWrappedInstance（）访问要引用的函数 . 像这样：

    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

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

    回复于
  • 1

    另一种方法是使用其他一些道具名称（除了 ref ） . 我've found that this also works well if you'使用像 styled-components 或 emotion 这样的库例如在连接的_1799480中：

    <MyComponent
  ...
  innerRef={(node) => { this.myRef = node; }}
/>
    回复于
  • -2

    事实证明，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（）神奇地工作 .

    回复于

相关问题