Question

如果state.show = true，我正在使用条件渲染来渲染特定的按钮。问题是，如果show不正确，则会播放动画，但不会删除该组件（因为该动画不会删除该组件，而只是对其进行动画处理。）

我正在使用材料用户界面，阿芙罗狄蒂，反应魔术

有我的代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button'
import {StyleSheet, css} from 'aphrodite'
import { swap, vanishOut } from 'react-magic'
import vanishIn from 'react-magic/lib/bling/vanishIn';

const styles = StyleSheet.create({
  magic: {
      animationName: vanishIn,
      animationDuration: '2s'
  },
  magicOut: {
    animationName: vanishOut,
    animationDuration: '2s'
  }
});


class App extends Component {

   constructor(props) {
    super(props);
    this.state = {show: true};
}


FalseState(){
  this.setState({show:false});
}



  render() {

    const show = this.state.show
    let buttonStart;

    if(show===true){
      buttonStart =
      <div className={css(styles.magic)}>
      <Button className="start" variant="raised" onClick={() => this.FalseState()}>Button</Button>
    </div>;

    } else {
      buttonStart =
      <div className={css(styles.magicOut)}>
      <Button className="start" variant="raised" >Button</Button>
    </div>;
    }

  return (
  <div className="App">
    {buttonStart}
  </div>
    );
  }
}

export default App;

Answer 1

我尝试在动画结束后使用另一个状态变量来触发组件的卸载-使用 setTimeout 。

希望这会有所帮助：）

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button';
import { StyleSheet, css } from 'aphrodite';
import { swap, vanishOut } from 'react-magic';
import vanishIn from 'react-magic/lib/bling/vanishIn';

const styles = StyleSheet.create({
    magic: {
        animationName: vanishIn,
        animationDuration: '2s'
    },
    magicOut: {
        animationName: vanishOut,
        animationDuration: '2s'
    }
});

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { show: true, unMount: false };
    }

    FalseState() {
        this.setState({ show: false }, () => {
            setTimeout(() => {
                this.setState({ unMount: true });
            }, 2000);
        });
    }

    render() {
        const show = this.state.show;
        let buttonStart;

        if (this.state.unMount) {
            return null;
        }

        if (show === true) {
            buttonStart = (
                <div className={css(styles.magic)}>
                    <Button className="start" variant="raised" onClick={() => this.FalseState()}>
                        Button
                    </Button>
                </div>
            );
        } else {
            buttonStart = (
                <div className={css(styles.magicOut)}>
                    <Button className="start" variant="raised">
                        Button
                    </Button>
                </div>
            );
        }

        return <div className="App">{buttonStart}</div>;
    }
}

export default App;

在React中播放动画后删除组件

1 个答案: