探討建構函式之外是否可以取得React元件實例的指針

Question

考慮這個React元件：

import React, { Component } from 'react'

class Frame extends Component {
  constructor(props) {
    super(props)
    console.log('constructor', this)  // 我想要 *this* 但是 ...
  }

  render() {
    return <p></p>
  }
}

export default Frame

我們這樣初始化它：

const view = <Frame />
console.log(view)  // 在这里！

這兩個列印語句會輸出：

{$$typeof: Symbol(react.element), key: null, ref: null, props: {…}, type: ƒ, …}
constructor Frame {props: {…}, context: undefined, refs: {…}, updater: {…}}

所以，我實際上想要在建構函式中的指標this，但是在我透過JSX將frame初始化為變數view的地方。這可能嗎？

Answer 1

由於JSX <> 語法只是對 React.createElement(Component, props, ...children) 的合成糖

你的類別元件在該函數內部由React進行初始化，React不會公開this的值，因此無法取得指向它的指標