使用没有 jsx 的 react-spring

Question

我想用 react-spring 做一些基本的动画。我能找到的所有示例都是基于 JSX，显然大多数人在开发 React 时都在使用它。但是在我正在实施的项目中，JSX 已关闭，import 也是非法的，只有require 可用。这是一些 es-lint 设置以保持代码约定。

我尝试了以下方法：

const createReactClass = require('create-react-class');
const React = require('react');
const Spring = require('react-spring');

const h = React.createElement;

const SectionCollapse = createReactClass({
  render: function () {
    return (
      h(Spring, {
        from: { opacity: 0 },
        to: { opacity: 1 }
      },
      (sp) => {
        return h('div', {}, 'should render');
      }));
  }
});

但我得到了错误：

react.development.js:188 警告： React.createElement: type is invalid -- 需要一个字符串（对于 内置组件）或类/函数（用于复合组件） 但得到：未定义。您可能忘记从 它定义的文件，或者您可能混淆了默认值和命名 进口。

检查SectionCollapse的渲染方法。

这可能是我想念的一些简单的nobrainer，

Answer 1

看看https://www.react-spring.io/docs/hooks/basics 的第一个示例，在我看来，您正在尝试从 JSX 到非 JSX。

所以原来的例子是：

import { useSpring, animated } from 'react-spring'

function App() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } })
  return <animated.div style={props}>I will fade in</animated.div>
}

转换你的导入基本上是正确的。

var Spring = require("react-spring");

但我认为您的 h() 函数属性缺少一些信息 - 这就是我在使用 https://babeljs.io/repl 检查后转换 JSX 的方式。

  return h(Spring.animated.div, {
    style: {
    opacity: 1,
    from: {
      opacity: 0
    }
   }
  }, "I will fade in");

回到您的示例，这应该可以解决问题（未经测试）：

const createReactClass = require('create-react-class');
const React = require('react');
const Spring = require('react-spring');

const h = React.createElement;

const SectionCollapse = createReactClass({
  render: function () {
    return (h(Spring.animated.div, { style: {
        from: { opacity: 0 },
        to: { opacity: 1 }
       } 
      },
      h('div', {}, 'should render')));
  }
});