javascript – React ES6 |如何通过引用访问子组件函数

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

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

我有一个Dialog组件看起来像下面的伪代码. Dialog有一个“保存”按钮,调用save(),它需要调用child 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,然后执行save,只要它是true,但我宁愿弄清楚如何获取上面的React文档中详细描述的方法.

关于如何使文档方法工作或以不同的方式访问子组件功能的任何想法?

Redux connect接受一个选项参数作为第四个参数.在此选项参数中,您可以将标记与Ref设置为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

请阅读这篇关于使用参考文献的文章,并考虑如果有更好的方法:https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs

http://stackoverflow.com/questions/34004331/react-es6-how-to-access-child-component-functions-via-refs

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – React ES6 |如何通过引用访问子组件函数