黑科技-react如何获取父元素

[luke93h]

黑科技-react如何获取父元素

前段时间再学习react的源码，解决了自己的一些疑惑，也发现了一些黑科技操作方法，此处分享给大家。

通常父组件获得子组件的实例可以通过ref获取，那子组件如何获取父组件的实例呢？

这里提供一种黑科技思路供大家玩耍

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";


class App extends React.Component {
  constructor(props){
    super(props)
    this.state={
      a: 1
    }
  }
  add = () => {
    this.setState({
      a: this.state.a + 1
    })
  }
  render() {
    return <div>
      <div>{this.state.a}</div>
      <Child />
    </div>
  }
}

class Child extends React.Component{
  onClick = () => {
    let parent = this._reactInternalFiber.return.return.stateNode
    parent.add()
  }
  render(){
    return <button onClick={this.onClick}>点我调用父组件</button>
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

解释：

1. this._reactInternalFiber返回的是fiber对象
2. Child的return是div，Child的return的return才是App
3. 通过fiber.stateNode获取组件实例
4. 如果想要自动找到classCommponent，可以通过判断fiber的tag是否为2向上遍历寻找，此处不再展开。

在线调试

[xiangwenhu]

好是好, 怕版本升级后不支持

[luke93h]

好是好, 怕版本升级后不支持

一般开发，版本是锁死的，影响不大。不过不推荐生产使用，只是好玩，哈哈