有没有办法在React中访问父组件实例？

我知道这不是一个能够像this.parent在React组件中那样做的功能方法,而且我似乎无法在React组件实例上找到任何通向父级的属性,但我只是希望能够在我需要的地方做一些自定义的事情.

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

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

我已经构建了一个修改输出jsx的转换器来实现这一点.我通过传入parent={this}所有组成的子组件来做到这一点.然而,它发生,我认为也许我根本不知道的东西,这将使我的方式来访问父组件实例事实后,无需额外transpilation修改.

任何提示将非常感激.

更新React 0.13及更新版本

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

另一种方法是,从React 16开始this._reactInternalFiber._debugOwner.stateNode.

你已经认识到这几乎不是一件好事,但我在这里重复一遍,因为那些不能很好地阅读这个问题的人:这通常是在React中完成任务的不正当方法.

公共 API中没有任何内容可以让您获得所需内容.您可以使用React内部实现此功能,但由于它是私有API,因此可能随时中断.

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

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

这是一个例子:

var Parent = React.createClass({
  render() {
      return ;
  },

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

var Child = React.createClass({
  render() {
    return {this.props.v}
  },

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

ReactDOM.render(, container);

class Parent extends React.Component {

    constructor(props) {
        super(props)

        this.fn = this.fn.bind(this)
    }

    fn() {
        console.log('parent')
    }

    render() {
        return 
    }

}

const Child = ({ fn }) => Click me!

class Parent extends React.Component {

    constructor(props) {
        super(props)

        this.fn = this.fn.bind(this)
    }

    getChildContext() {
        return {
            fn: this.fn,
        }
    }

    fn() {
        console.log('parent')
    }

    render() {
        return 
    }

}

Parent.childContextTypes = {
    fn: React.PropTypes.func,
}

const Child = (props, { fn }) => Click me!

Child.contextTypes = {
    fn: React.PropTypes.func,
}