ReactJS转TypeScript组件：this.element的含义及TS适配咨询

Hey there! Let's break down what this.element is in that old JavaScript React component, and how you can implement the same functionality cleanly in TypeScript.

First off, this.element is not a built-in React property—it's something the original developer added manually. Typically, it's used to store a direct reference to a DOM element rendered by the component.

In old JS React code, developers might have set this up in one of a few ways:

• Grabbing the element via document.getElementById() in componentDidMount() and assigning it to this.element
• Using older ref patterns (like string refs, which are now deprecated) to attach the element to the component instance
• Storing the result of ReactDOM.findDOMNode() (also not recommended these days)

Here's a quick example of how it might have looked in JS:

class OldJSComponent extends React.Component {
  componentDidMount() {
    // Grab the DOM element and store it on the component instance
    this.element = document.getElementById('target-element');
    if (this.element) {
      this.element.addEventListener('scroll', this.handleScroll);
    }
  }

  componentWillUnmount() {
    // Clean up event listeners to avoid leaks
    if (this.element) {
      this.element.removeEventListener('scroll', this.handleScroll);
    }
  }

  handleScroll = () => {
    // Do something with the element
    console.log('Scrolled!', this.element.scrollTop);
  };

  render() {
    return <div id="target-element">Scroll me!</div>;
  }
}

TypeScript is strongly typed, so you can't just attach arbitrary properties to this without declaring their types first. Here are the best ways to do this properly:

1. Declare a custom property with explicit typing #

If you want to stick to the direct DOM lookup pattern (though refs are better practice), you need to define the property and its type in your component class:

import React from 'react';

class TSComponent extends React.Component {
  // Declare the property with a type that allows null (since the element might not exist)
  element: HTMLElement | null = null;

  componentDidMount() {
    this.element = document.getElementById('target-element');
    if (this.element) {
      this.element.addEventListener('scroll', this.handleScroll);
    }
  }

  componentWillUnmount() {
    if (this.element) {
      this.element.removeEventListener('scroll', this.handleScroll);
    }
  }

  handleScroll = () => {
    if (this.element) {
      console.log('Scrolled position:', this.element.scrollTop);
    }
  };

  render() {
    return <div id="target-element">Scroll me in TS!</div>;
  }
}

2. Use React Refs (Recommended) #

React's built-in ref system is the cleaner, more maintainable approach. In TypeScript, you need to specify the exact type of DOM element the ref will target:

import React from 'react';

class TSRefComponent extends React.Component {
  // Create a ref typed specifically for an HTMLDivElement
  elementRef = React.createRef<HTMLDivElement>();

  componentDidMount() {
    // Access the DOM element via the ref's `current` property
    if (this.elementRef.current) {
      this.elementRef.current.addEventListener('scroll', this.handleScroll);
      this.elementRef.current.style.border = '2px solid blue';
    }
  }

  componentWillUnmount() {
    if (this.elementRef.current) {
      this.elementRef.current.removeEventListener('scroll', this.handleScroll);
    }
  }

  handleScroll = () => {
    if (this.elementRef.current) {
      console.log('Scrolled position:', this.elementRef.current.scrollTop);
    }
  };

  render() {
    // Attach the ref to the element in your render method
    return <div ref={this.elementRef}>Scroll me with Refs!</div>;
  }
}

3. Callback Refs (for more control) #

If you need to run logic when the ref is attached or detached, callback refs are a great option. Again, type the node properly:

import React from 'react';

class TSCallbackRefComponent extends React.Component {
  element: HTMLDivElement | null = null;

  // Callback that receives the DOM node when it mounts/unmounts
  setElementRef = (node: HTMLDivElement | null) => {
    // Clean up old listener if the node is changing
    if (this.element) {
      this.element.removeEventListener('scroll', this.handleScroll);
    }
    
    this.element = node;
    
    // Attach new listener if the node exists
    if (this.element) {
      this.element.addEventListener('scroll', this.handleScroll);
    }
  };

  handleScroll = () => {
    if (this.element) {
      console.log('Scrolled position:', this.element.scrollTop);
    }
  };

  render() {
    return <div ref={this.setElementRef}>Scroll me with Callback Refs!</div>;
  }
}

• this.element is a custom property, not React-native—its purpose is to hold a DOM element reference for direct manipulation.
• In TypeScript, always explicitly type such properties to avoid type errors.
• Prefer React Refs over manual DOM lookups—they're more aligned with React's lifecycle and safer.

内容的提问来源于stack exchange，提问作者user5655470