主页 / 问题 / 874178
Accepted
Suvitruf - Andrei Apanasik
Asked:2020-08-28 04:25:34 +0000 UTC2020-08-28 04:25:34 +0000 UTC

使用本机 React 完成时的逻辑淡出

  • 772

假设有一个这样的按钮：

import React from 'react';

import $ from 'jquery';

class LoggingButton extends React.Component {

  handleClick = () => {
    $('#div-welcome').fadeOut(400, () => {
      // что-то нехорошее делаем
    });
  };

  render() {
    return (
      <button onClick={this.handleClick}  id="connect-button" className="default-button" >
        <span>Connect</span>
        <span id="loader"/>
      </button>
    );
  }
}

export default LoggingButton

但是 jQuery 用于动画，这根本不是 React 方式。如何使这个动画在完成时具有一些逻辑反应？

在本机移动浏览器上工作。

javascript

1 个回答

  1. Best Answer

    我对原生 React 动画工具一无所知，但 fadeOut 也可以。如果使用得当。

    首先，你不能同时拥有由 React 和 JQuery 管理的相同样式——这正是现在正在发生的事情。你让一个元素淡出，但你永远不会让它淡入......

    其次，出于某种恐惧，您的组件管理了页面的完全左侧元素，它不是它创建的。这违反了隔离组件的原则，并导致潜在的错误。相反，您应该调用一个外部处理程序，该处理程序将更改负责动画的组件的属性。

    第三，在 React 思想中，UI 状态之间的所有转换都应该通过更改 props、状态或至少通过 forceUpdate 来完成，而不是在事件处理程序中。

    结果是这样的：

    class DivWelcome extends React.Component {
    render() { ... }

    componentDidUpdate(prevProps) {
        const $this = $(ReactDOM.findDOMNode(this));
        if (this.props.visible && !prevProps.visible)
            $this.fadeIn();
        else if (!this.props.visible && prevProps.visible)
            $this.fadeOut();
    }

    componentDidMount() {
        const $this = $(ReactDOM.findDOMNode(this));
        if (this.props.visible)
            $this.show(); // или fadeIn, зависит от того что нужно получить
        else if (!this.props.visible)
            $this.hide(); // или fadeOut, зависит от того что нужно получить
    }

    componentWillUnmount() {
        const $this = $(ReactDOM.findDOMNode(this));
        $this.stop();
    }
}

class LoggingButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.handleClick} className="default-button">
        <span>Connect</span>
        <span/>
      </button>
    );
  }
}

class App extends React.Component {
    constructor() {
        this.state = { welcomeVisible: true };
    }

    handleClick = () => setState({ welcomeVisible: false });

    render() {
        return [
            <DivWelcome visible={this.state.welcomeVisible} />,
            <LoggingButton handleClick={this.handleClick} />,
        ]
    }
}

    PS我没有检查代码，一般我从来没有写过react，所以谨慎对待答案

    • 1

相关问题