使用没有jsx的react-spring

Question

I want to use react-spring for some basic animation. All examples that I can find is based on JSX, which most people obviously are using when developing react. However in the project I am implementing it, JSX have been turned off, also import is illegal, only require is available. This is some es-lint settings to keep code convention.

I have tried following:

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');
      }));
  }
});

But I get the error:

react.development.js:188 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of SectionCollapse .

This is probably some easy nobrainer that I am missing,

Answer 1

Looking at the very first example of https://www.react-spring.io/docs/hooks/basics as it looks to me you are trying this from JSX to non JSX.

So the original example is:

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>
}

Converting your import is basically correct.

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

But I think your h() function properties are lacking some information - That's how I converted the JSX after checking it with https://babeljs.io/repl .

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

Coming back to your example, this should do the trick (untested):

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')));
  }
});