Question

我是一个新手，会做出反应并尝试运行以下示例示例： http://react-component.github.io/tree/examples/animation.html

所以我创建了一个具有以下内容的MonApp.js文件：

import React, { Component } from 'react';
import { render } from "react-dom";
import PropTypes from 'prop-types';
import Tree, { TreeNode } from 'rc-tree';
import cssAnimation from 'css-animation';


const STYLE = `
    .collapse {
        overflow: hidden;
        display: block;
    }

    .collapse-active {
        transition: height 0.3s ease-out;
}`;

class MonApp extends React.Component {

    function animate(node, show, done) {
        let height = node.offsetHeight;
        return cssAnimation(node, 'collapse', {
            start() {
                if (!show) {
                    node.style.height = `${node.offsetHeight}px`;
                } else {
                    height = node.offsetHeight;
                    node.style.height = 0;
                }
            },
            active() {
                node.style.height = `${show ? height : 0}px`;
            },
            end() {
                node.style.height = '';
                done();
            },
        });
    }


    const demo = (
        <div>
            <h2>expanded</h2>
            <style dangerouslySetInnerHTML={{ __html: STYLE }}/>
            <Tree
                defaultExpandAll={false}
                defaultExpandedKeys={['p1']}
                openAnimation={animation}
            >
                <TreeNode title="parent 1" key="p1">
                    <TreeNode key="p10" title="leaf"/>
                        <TreeNode title="parent 1-1" key="p11">
                            <TreeNode title="parent 2-1" key="p21">
                                <TreeNode title="leaf"/>
                                <TreeNode title="leaf"/>
                            </TreeNode>
                            <TreeNode key="p22" title="leaf"/>
                        </TreeNode>
                    </TreeNode>
            </Tree>
      </div>
    );


}

ReactDOM.render(<MonApp />, document.getElementById('__react-content'));

然后，我创建了一个具有以下内容的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MonApp from './MonApp';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<MonApp />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

我在我的npm项目中放置了react-tree的依赖项。但是，出现以下错误：

/src/MonApp.js
  Line 33:  Parsing error: Unexpected token

  31 | class MonApp extends React.Component {
  32 | 
> 33 |  function animate(node, show, done) {
     |           ^
  34 |      let height = node.offsetHeight;
  35 |      return cssAnimation(node, 'collapse', {
  36 |          start() {

我认为该示例正在谈论原始JS，而我不必要从中创建一个ReactComponent。正确吗？

但是，我不确定如何使该示例正常工作吗？如果有人有任何建议或指导，将不胜感激。

热烈的问候，〜ash

Answer 1

我找到了可能的解决方法。

我创建了一个名为Animation.js的文件

  /* eslint no-console:0, react/no-danger: 0 */
  import 'rc-tree/assets/index.less';
  import ReactDOM from 'react-dom';
  import Tree, { TreeNode } from 'rc-tree';
  import cssAnimation from 'css-animation';
  import React, {Component} from "react"

  const STYLE = `
  .collapse {
    overflow: hidden;
    display: block;
  }
  .collapse-active {
    transition: height 0.3s ease-out;
  }
  `;

  function animate(node, show, done) {
    let height = node.offsetHeight;
    return cssAnimation(node, 'collapse', {
      start() {
        if (!show) {
          node.style.height = `${node.offsetHeight}px`;
        } else {
          height = node.offsetHeight;
          node.style.height = 0;
        }
      },
      active() {
        node.style.height = `${show ? height : 0}px`;
      },
      end() {
        node.style.height = '';
        done();
      },
    });
  }

  const animation1 = {
    enter(node, done) {
      return animate(node, true, done);
    },
    leave(node, done) {
      return animate(node, false, done);
    },
  };

  const demo = (
    <div className="App">
      <h2>Expanded Application</h2>
      <style dangerouslySetInnerHTML={{ __html: STYLE }}/>
      <Tree
        defaultExpandAll={false}
        defaultExpandedKeys={['p1']}
        openAnimation={animation1}
      >
        <TreeNode title="Physical Topology" key="p1">
          <TreeNode key="p10" title="titl1"/>
          <TreeNode title="Nodes" key="p11">
            <TreeNode title="node1" key="p21">
              <TreeNode title="node1-1"/>
              <TreeNode title="node1-2"/>
            </TreeNode>
            <TreeNode key="p22" title="leaf"/>
          </TreeNode>
        </TreeNode>
      </Tree>
    </div>
  );

// ReactDOM.render(demo, document.getElementById('__react-content'));
// ReactDOM.render(demo, document.getElementByTagName('body'));

class Animation extends Component {

  componentDidMount() {
    console.error('I was triggered during componentDidMount')
  }

  render () {
    console.log('I was triggered during render');    
    return demo;
  }
}

export default Animation;

然后在index.js中输入以下内容：

ReactDOM.render(<Animation />, document.getElementById('root'));

那行得通。

反应rc-tree的动画未编译

1 个答案: