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

Question

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

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

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

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

任何提示将非常感激.

Answer 1

更新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 <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/

Answer 2

如果你需要从孩子那里访问父母的道具和功能,那没有什么不对.

关键是你不应该使用React内部和未记录的API.

首先,它们可能会改变(破坏你的代码),最重要的是,还有许多其他更清洁的方法.

将道具传递给儿童

class Parent extends React.Component {

    constructor(props) {
        super(props)

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

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

    render() {
        return <Child fn={this.fn} />
    }

}

const Child = ({ fn }) => <button onClick={fn}>Click me!</button>

工作实例

使用上下文(如果没有直接的父/子关系)

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 <Child fn={this.fn} />
    }

}

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

const Child = (props, { fn }) => <button onClick={fn}>Click me!</button>

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

工作实例

Answer 3

使用 React 16 测试

我正在使用上下文进行类似的操作，对于阅读本文的任何人来说，在大多数情况下，不建议访问父级！

我创建了一个持有人，当使用时，将始终引用显示列表中的第一个持有人，因此如果您愿意，它是它的“父级”。看起来像这样：

const ParentContext = React.createContext(null);

// function to apply to your react component class
export default function createParentTracker(componentClass){

    class Holder extends React.PureComponent {

        refToInstance

        render(){
            return(
                <ParentContext.Consumer>
                {parent => {
                    console.log('I am:', this, ' my parent is:',parent ? parent.name : 'null');
                    return(
                        <ParentContext.Provider value={this}>
                            <componentClass ref={inst=>refToInstance=inst} parent={parent} {...this.props} />
                        </ParentContext.Provider>
                    )}
                }
                </ ParentContext.Consumer>
            )
        }
    }

    // return wrapped component to be exported in place of yours
    return Holder;
}

然后要使用它，您将在导出时将反应组件传递给方法，如下所示：

class MyComponent extends React.Component {

    _doSomethingWithParent(){
        console.log(this.props.parent);  // holder
        console.log(this.props.parent.refToInstance);  // component
    }
}

// export wrapped component instead of your own
export default createParentTracker(MyComponent);

这样，任何导出函数的组件都会将其父级的持有者作为道具传入（如果没有进一步向上层次结构，则为 null）。从那里您可以获取 refToInstance。但是，在安装所有内容之前，它将是未定义的。