Css 如何在react中设置func comp动画？

通常，在基于类的comp中，只需使用componentDidMount和setTimeout来设置状态，并动态地将一个类添加到主div中并设置动画。我试图做同样的事情，只是把类传递给func comp，但它不起作用。我现在想坚持使用纯css

我在React中有一个功能组件，如下所示：

import React from 'react';

export default (props.class) => {
 return (
  <div className={`animate ${props.class}`}>
    Hello World
  </div>
 )
}

---

---

我想这将是一个有点令人困惑的答案，但我找到了一种加载动画的方法，以及一种延迟组件卸载的方法

这是针对功能组件的，因为在基于类的comp中，您可以在comp本身中完成其中的一半

编辑：根据我的发现，这对基于类的comp也有效

注意：base是基类，action是希望为动画执行的操作

import React, { Component } from 'react'

export default Comp => {
  return class extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        shouldRender: this.props.isMounted,
        didMount: false
      }
    }

    componentWillReceiveProps(nextProps) {
      if (this.props.isMounted && !nextProps.isMounted) {
        setTimeout(() => {
          this.setState({ shouldRender: false })
        }, this.props.delayTime)
        this.setState({ didMount: false })
      } else if (!this.props.isMounted && nextProps.isMounted) {
        setTimeout(() => {
          this.setState({ didMount: true })
        }, 0)
        this.setState({ shouldRender: true })
      }
    }

    render() {
      const { didMount } = this.state
      const { base, action, isMounted } = this.props
      return this.state.shouldRender ? (
        <div className={`${base} ${didMount && isMounted ? action : ''}`}>
          <Comp {...this.props} />
        </div>
      ) : null
    }
  }
}

---

关键：将延迟时间与动画时间匹配，否则将无法正常工作。延迟时间以毫秒为单位，所以500=.5s

很抱歉，我在手机上执行此操作，我的代码中的所有内容都是正确的，但这里可能有输入错误。很抱歉。但这是一个道具，不是你可以使用的类名

import React, { Component} from 'react';
import FuncComp from './FuncComp';

export default class App extends Component {
 constructor(props){
  super(props) 

  this.state = { class: '' }
 }

 componentDidMount() {
  setTimeout(() => { this.setState({class: 'animateAction'}), 0)
 }

 render(){
  return (
  <div>
   <FuncComp class={this.state.class} />
  </div>
 )
}
}

.animate {
 transform: scaleY(0);
 transition: transform 1s ease;
}
.animateAction {
 transform: scaleY(1);
}

import React, { Component } from 'react'

export default Comp => {
  return class extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        shouldRender: this.props.isMounted,
        didMount: false
      }
    }

    componentWillReceiveProps(nextProps) {
      if (this.props.isMounted && !nextProps.isMounted) {
        setTimeout(() => {
          this.setState({ shouldRender: false })
        }, this.props.delayTime)
        this.setState({ didMount: false })
      } else if (!this.props.isMounted && nextProps.isMounted) {
        setTimeout(() => {
          this.setState({ didMount: true })
        }, 0)
        this.setState({ shouldRender: true })
      }
    }

    render() {
      const { didMount } = this.state
      const { base, action, isMounted } = this.props
      return this.state.shouldRender ? (
        <div className={`${base} ${didMount && isMounted ? action : ''}`}>
          <Comp {...this.props} />
        </div>
      ) : null
    }
  }
}

import React from 'react'
import AnimateHOC from './AnimateHOC'

const myFuncComp = (props.class) => {
 return (
  <h1>
    Hello World
  </h1>
 )
}

const AnimateComp = AnimateHOC(myFuncComp);

render() {
 return (
  <div>
   <AnimateComp
    delayTime={500}
    isMounted={this.state.isMounted}
    base={'animate'}
    action={'animateAction'}
   />
   <button onClick={this.setState({ isMounted: !this.state.isMounted }) }>Toggle</button>
  </div>
 )
}

 .animate {
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.5s linear;
  }

  .animateAction {
    transform: scaleY(1);
  }