如何在React类组件中使用依赖Hooks的react-spring动画库？

Hey there! That error makes total sense—React Hooks like useSpring can only be called directly in the body of a function component, not inside a class component's constructor, render method, or any other class method. Since react-spring's hook-based API is built for function components, we need a workaround for class-based apps. Here are two solid solutions:

Solution 1: Use react-spring's Class-Friendly Spring Component #

react-spring provides a component-based API (Spring) that works perfectly with class components, no hooks required. Here's how to refactor your code:

import React from 'react';
import { Spring, animated, interpolate } from 'react-spring'

export default class TestAnimation extends React.Component {
  render() {
    return (
      <div>
        <Spring
          from={{ o: 0, xyz: [0, 0, 0], color: 'red' }}
          to={{ o: 1, xyz: [10, 20, 5], color: 'green' }}
        >
          {({ o, xyz, color }) => (
            <animated.div style={{
              color,
              background: o.interpolate(o => `rgba(210, 57, 77, ${o})`),
              transform: xyz.interpolate((x, y, z) => `translate3d(${x}px, ${y}px, ${z}px)`),
              border: interpolate([o, color], (o, c) => `${o * 10}px solid ${c}`),
              padding: o.interpolate({ range: [0, 0.5, 1], output: [0, 0, 10] }).interpolate(o => `${o}%`),
              borderColor: o.interpolate({ range: [0, 1], output: ['red', '#ffaabb'] }),
              opacity: o.interpolate([0.1, 0.2, 0.6, 1], [1, 0.1, 0.5, 1])
            }}>
              {o.interpolate(n => n.toFixed(2))}
            </animated.div>
          )}
        </Spring>
      </div>
    );
  }
}

What changed? #

• We replaced the useSpring hook with the <Spring> component, which takes from and to props directly.
• The component uses a render prop that gives us access to the animated values (o, xyz, color), just like the hook did.
• All your interpolation logic stays exactly the same—we just moved it inside the render prop function of <Spring>.

Solution 2: Extract Animation to a Function Component #

If you prefer using the hook-based API, you can create a small function component that handles the animation, then render that component inside your class component:

import React from 'react';
import { useSpring, animated, interpolate } from 'react-spring'

// Function component with the hook-based animation
const AnimatedText = () => {
  const { o, xyz, color } = useSpring({
    from: { o: 0, xyz: [0, 0, 0], color: 'red' },
    o: 1,
    xyz: [10, 20, 5],
    color: 'green'
  });

  return (
    <animated.div style={{
      color,
      background: o.interpolate(o => `rgba(210, 57, 77, ${o})`),
      transform: xyz.interpolate((x, y, z) => `translate3d(${x}px, ${y}px, ${z}px)`),
      border: interpolate([o, color], (o, c) => `${o * 10}px solid ${c}`),
      padding: o.interpolate({ range: [0, 0.5, 1], output: [0, 0, 10] }).interpolate(o => `${o}%`),
      borderColor: o.interpolate({ range: [0, 1], output: ['red', '#ffaabb'] }),
      opacity: o.interpolate([0.1, 0.2, 0.6, 1], [1, 0.1, 0.5, 1])
    }}>
      {o.interpolate(n => n.toFixed(2))}
    </animated.div>
  );
};

// Your original class component, now using the function component
export default class TestAnimation extends React.Component {
  render() {
    return <div><AnimatedText /></div>;
  }
}

Why this works? #

• Hooks are allowed inside the function component (AnimatedText) because it's a function component's body.
• Your class component doesn't need to touch hooks at all—it just renders the animated component like any other React component.

Either of these approaches will fix the "Invalid hook call" error and get your animation running in your class-based app.

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