TSX文件中'React.createRef'不存在问题求助

Hey there, let's work through that createRef error you're facing after moving from JSX to TSX—totally get how frustrating that can be when you're just trying to grab a ref to your component!

First, let's break down why this error pops up and how to fix it step by step:

Common Causes & Solutions #

1. Your React version is too old #

React.createRef() was introduced in React 16.3.0. If your project uses an older version, TypeScript won't recognize this method because it doesn't exist in the older React type definitions.

• Check your package.json to confirm your React version. If it's below 16.3.0, upgrade it with:

  npm install react@latest react-dom@latest
  # or
  yarn add react@latest react-dom@latest
  

2. Missing or mismatched TypeScript type definitions #

TypeScript relies on @types/react to understand React's API. If you don't have this package installed, or if its version doesn't match your React version, you'll run into type errors.

• Install or update the type definitions:

  npm install @types/react@latest --save-dev
  # or
  yarn add @types/react@latest --dev
  

3. Correctly type your ref (TSX best practice) #

In TypeScript, you should explicitly define the type of element your ref targets—this helps TypeScript catch errors and gives you better intellisense. For your div container, specify HTMLDivElement:

// Inside your constructor
this.divContainerRef = React.createRef<HTMLDivElement>();

4. Ensure React is properly imported #

Double-check that you have import React from 'react'; at the top of your component file. Without this, TypeScript won't recognize the React namespace and its methods.

Why querySelector isn't ideal (like you mentioned!) #

You're absolutely right—using document.querySelector() directly goes against React's design principles. React manages the virtual DOM, so direct DOM queries can lead to inconsistencies if the DOM updates unexpectedly. Refs are the React-native way to access DOM elements safely, keeping your code aligned with React's lifecycle and state management.

Corrected Constructor Code #

Here's how your constructor should look with proper TSX typing and fixes:

// Define your props type first (adjust based on your component's needs)
interface KanbanProps {
  background?: string;
  // Add other props your component uses
}

// Define your state type for clarity
interface KanbanState {
  data: typeof initialData;
  showNewListForm: boolean;
  whichButtonClicked: undefined | string; // Adjust type to match your use case
  background: string;
}

class KanbanComponent extends React.Component<KanbanProps, KanbanState> {
  divContainerRef: React.RefObject<HTMLDivElement>;

  constructor(props: KanbanProps) {
    super(props);
    this.state = {
      data: initialData,
      showNewListForm: false,
      whichButtonClicked: undefined,
      background: props.background || "#23719f"
    };

    // Initialize typed ref
    this.divContainerRef = React.createRef<HTMLDivElement>();
    // Note: current will be null here—refs only populate after the component mounts!
    console.log("kanban reference : " + this.divContainerRef.current);

    // Bind event handlers
    this.handleDragStart = this.handleDragStart.bind(this);
    this.handleDragEnd = this.handleDragEnd.bind(this);
    this.handleLaneDragEnd = this.handleLaneDragEnd.bind(this);
    this.handleLaneDragStart = this.handleLaneDragStart.bind(this);
    this.onCardAdd = this.onCardAdd.bind(this);
    this.onCardClick = this.onCardClick.bind(this);
    this.addNewListHandler = this.addNewListHandler.bind(this);
    this.containerRefResolver = this.containerRefResolver.bind(this);
    this.isBoardPresent = this.isBoardPresent.bind(this);
  }

  // Don't forget to attach the ref in your render method!
  render() {
    return (
      <div ref={this.divContainerRef} style={{ background: this.state.background }}>
        {/* Your component content here */}
      </div>
    );
  }
}

Quick note: The console.log in your constructor will show null because refs only get assigned to DOM elements after the component mounts. If you need to access the ref's current value, do it in componentDidMount() (for class components) or a useEffect hook (for functional components).

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