使用沒有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：類型無效-預期為字符串（對於內置組件）或類/函數（對於復合組件），但得到：未定義。 您可能忘記了從定義文件中導出組件，或者可能混淆了默認導入和命名導入。

檢查SectionCollapse的渲染方法。

這可能是我想念的一些容易的事，

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