如何使用 React 组件 类 中的 react-spring

Question

我正在尝试将 react-spring 动画库导入到基于 React 组件 类 的 reactjs 应用程序中。

似乎新的（截至 2019 年）React Hooks 使一些集成更加混乱。

所以这就是为什么我要问如何使用 react-spring，后者又使用 React 钩子，在 ReactJS 应用程序中使用 类.

无法正常运行的代码如下所示：

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


export default class TestAnimation extends React.Component {

    constructor(props) {
        super(props);

        const { o, xyz, color } = useSpring({
            from: { o: 0, xyz: [0, 0, 0], color: 'red' },
            o: 1,
            xyz: [10, 20, 5],
            color: 'green'
        });

        this.aniText = <animated.div
            style={{
                // If you can, use plain animated values like always, ...
                // You would do that in all cases where values "just fit"
                color,
                // Unless you need to interpolate them
                background: o.interpolate(o => `rgba(210, 57, 77, ${o})`),
                // Which works with arrays as well
                transform: xyz.interpolate((x, y, z) => `translate3d(${x}px, ${y}px, ${z}px)`),
                // If you want to combine multiple values use the "interpolate" helper
                border: interpolate([o, color], (o, c) => `${o * 10}px solid ${c}`),
                // You can also form ranges, even chain multiple interpolations
                padding: o.interpolate({ range: [0, 0.5, 1], output: [0, 0, 10] }).interpolate(o => `${o}%`),
                // Interpolating strings (like up-front) through ranges is allowed ...
                borderColor: o.interpolate({ range: [0, 1], output: ['red', '#ffaabb'] }),
                // There's also a shortcut for plain, optionless ranges ...
                opacity: o.interpolate([0.1, 0.2, 0.6, 1], [1, 0.1, 0.5, 1])
            }}
        >
            {o.interpolate(n => n.toFixed(2)) /* innerText interpolation ... */}

        </animated.div>
    };


    render() {
        return <div>
            {this.aniText}
        </div>;
    }
}

导致此错误：

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Answer 1

您不能在 class 组件内使用挂钩。因此，您可以将动画组件拆分为它自己的功能组件，如下所示：

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

const AniText = ()=> {
  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={{
        // If you can, use plain animated values like always, ...
        // You would do that in all cases where values "just fit"
        color,
        // Unless you need to interpolate them
        background: o.interpolate(o => `rgba(210, 57, 77, ${o})`),
        // Which works with arrays as well
        transform: xyz.interpolate((x, y, z) => `translate3d(${x}px, ${y}px, ${z}px)`),
        // If you want to combine multiple values use the "interpolate" helper
        border: interpolate([o, color], (o, c) => `${o * 10}px solid ${c}`),
        // You can also form ranges, even chain multiple interpolations
        padding: o.interpolate({ range: [0, 0.5, 1], output: [0, 0, 10] }).interpolate(o => `${o}%`),
        // Interpolating strings (like up-front) through ranges is allowed ...
        borderColor: o.interpolate({ range: [0, 1], output: ['red', '#ffaabb'] }),
        // There's also a shortcut for plain, optionless ranges ...
        opacity: o.interpolate([0.1, 0.2, 0.6, 1], [1, 0.1, 0.5, 1])
    }}
  >
    {o.interpolate(n => n.toFixed(2)) /* innerText interpolation ... */}

  </animated.div>)

}

export default class TestAnimation extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return <div>
            <AniText />
        </div>;
    }
}

或者，如果你想坚持使用 class 组件，也可以使用 react-spring exports a render-props API，这在任何 React 组件中都是完全有效的，class否则：

import React from "react";
import { Spring, animated, interpolate } from "react-spring/renderprops";

export default class TestAnimation extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Spring
          native
          from={{ o: 0, xyz: [0, 0, 0], color: "red" }}
          to={{ o: 1, xyz: [10, 20, 5], color: "green" }}
        >
          {({ o, xyz, color }) => (
            <animated.div
              style={{
                // If you can, use plain animated values like always, ...
                // You would do that in all cases where values "just fit"
                color,
                // Unless you need to interpolate them
                background: o.interpolate(o => `rgba(210, 57, 77, ${o})`),
                // Which works with arrays as well
                transform: xyz.interpolate(
                  (x, y, z) => `translate3d(${x}px, ${y}px, ${z}px)`
                ),
                // If you want to combine multiple values use the "interpolate" helper
                border: interpolate(
                  [o, color],
                  (o, c) => `${o * 10}px solid ${c}`
                ),
                // You can also form ranges, even chain multiple interpolations
                padding: o
                  .interpolate({ range: [0, 0.5, 1], output: [0, 0, 10] })
                  .interpolate(o => `${o}%`),
                // There's also a shortcut for plain, optionless ranges ...
                opacity: o.interpolate([0.1, 0.2, 0.6, 1], [1, 0.1, 0.5, 1])
              }}
            >
              {// Finally, this is how you interpolate innerText
              o.interpolate(n => n.toFixed(2))}
            </animated.div>
          )}
        </Spring>
      </div>
    );
  }
}

这是一个包含两个并排解决方案的代码和框： https://codesandbox.io/s/8ynxyowzk0