有没有办法访问 React 中的父组件实例? [英] is there any way to access the parent component instance in React?

问题描述

我知道能够在 React 组件中执行诸如 this.parent 之类的操作不是一种函数式方法，而且我似乎无法在 React 组件实例上找到导致父母，但我只是希望能够在需要的地方做一些自定义的事情.

I know it's not a functional approach to be able to do something like this.parent in a React component, and I can't seem to find any properties on a React component instance that lead to the parent, but I'm just looking to be able to do some custom things where I need this.

在任何人浪费时间解释这不是 React 的功能性方式"之前，请了解我需要这样做，因为我正在努力实现以下目标:

Before anyone wastes their time explaining it's not the functional React "way," understand that I need this because of the following I'm trying to achieve:

为 Meteor 的 Spacebars 模板引擎构建一个转译器，其渲染模型确实考虑了父组件/模板.

我已经构建了一个转译器来修改输出 jsx 来实现这一点.我通过在组成的所有子组件中传入 parent={this} 来做到这一点.然而，事后我突然想到，也许我根本不知道什么东西能让我无需额外的转换修改就可以访问父组件实例.

I've already built a transpiler that modifies the output jsx to achieve this. I do this by passing in parent={this} in all child components composed. However, after the fact it occurred to me that maybe I simply don't know of something that will give me a way to access the parent component instance without additional transpilation modifications.

任何提示将不胜感激.

推荐答案

React 0.13 及更新版本的更新

Component._owner 在 React 0.13 中被弃用，并且 _currentElement 不再作为 this._reactInternalInstance 中的键存在.因此，使用下面的解决方案会引发 Uncaught TypeError: Cannot read property '_owner' of undefined.

Component._owner was deprecated in React 0.13, and _currentElement no longer exists as a key in this._reactInternalInstance. Therefore, using the solution below throws Uncaught TypeError: Cannot read property '_owner' of undefined.

替代方案是，从 React 16 开始，this._reactInternalFiber._debugOwner.stateNode.

The alternative is, as of React 16, this._reactInternalFiber._debugOwner.stateNode.

您已经认识到这几乎总是不是一件好事，但我在此为那些没有很好地阅读问题的人重复一遍:这通常是一种不正确的获取方式在 React 中完成的事情.

You've already recognized that this is not a good thing to do almost always, but I'm repeating it here for people that don't read the question very well: this is generally an improper way to get things done in React.

公共 API 中没有任何内容可以让您获得想要的东西.您可以使用 React 内部来实现这一点，但由于它是一个私有 API，它很可能在随时崩溃.

There's nothing in the public API that will allow you to get what you want. You may be able to get to this using the React internals, but because it's a private API it's liable to break at any time.

我再说一遍:你几乎肯定不应该在任何类型的生产代码中使用它.

I repeat: you should almost certainly not use this in any sort of production code.

也就是说，您可以使用 this 获取当前组件的内部实例._reactInternalInstance.在那里，您可以通过 _currentElement 属性访问元素，然后通过 _owner._instance 访问 owner 实例.

That said, you can get the internal instance of the current component using this. _reactInternalInstance. In there, you can get access to the element via the _currentElement property, and then the owner instance via _owner._instance.

这是一个例子:

var Parent = React.createClass({
  render() {
      return <Child v="test" />;
  },

  doAThing() {
    console.log("I'm the parent, doing a thing.", this.props.testing);
  }
});

var Child = React.createClass({
  render() {
    return <button onClick={this.onClick}>{this.props.v}</button>
  },

  onClick() {
    var parent = this._reactInternalInstance._currentElement._owner._instance;
    console.log("parent:", parent);
    parent.doAThing();
  }
});

ReactDOM.render(<Parent testing={true} />, container);

这里是 一个有效的 JSFiddle 示例:http://jsfiddle.net/BinaryMuse/j8uaq85e/

这篇关于有没有办法访问 React 中的父组件实例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！