如何使用 useRef 为 react class 组件中的组件设置样式？

Question

I am trying to call an element inside the following component

`

<ChartRendererCustomised ref={this.componentRef} vizState={DashboardChapterSummaryItemsTop[0].vizState} />

`

declared the variable as `

    this.componentRef = React.createRef(null)

`

and when trying to edit there are some errors such as

okay now I changed the method to

  insideTheRef() {
    console.log("button clicked");
    this.componentRef.current.focus()
    console.log("the consoled reref", this.componentRef.current);
  }

here I cannot access componentRef and gets the error "Uncaught TypeError: Cannot read properties of undefined (reading 'componentRef')"

I tried multiple methods from google but none worked out, I am new to class components and only familiar with functional components

Answer 1

You cannot use hooks in the class components. The React Hooks are meant to use in functional components. There are different life cycles in React Class Components, you can use according to your need. You can directly style element using inline style attribute or external styling using classes.