Question

我有一个看起来像这样的ReactJS组件：

import React from 'react';

class Circle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            percent: null
        };
    }    

    componentDidMount() {
        const url = "base url here" + this.props.endpoint;
        fetch(url)
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        percent: result.percent
                    });
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error: error
                    });
                }
            )
    }

    render() {
        return (
            <div className={"col-md-" + this.props.size + " progress-circles"} data-animate-on-scroll="on">
                <div className="progress-circle" data-circle-percent={"" + this.state.percent + ""} data-circle-text="">
                <h4>{this.props.title}</h4>
                    <svg className="progress-svg">
                        <circle r="80" cx="90" cy="90" fill="transparent" strokeDasharray="502.4" strokeDashoffset="0"></circle>
                        <circle className="bar" r="80" cx="90" cy="90" fill="transparent" strokeDasharray="502.4" strokeDashoffset="0"></circle>
                    </svg>
                </div>
            </div>
        );
    }
}

export default Circle;

到目前为止，这就像一个整体的魅力。唯一的问题是，有一个与此元素相关联的动画填充了进度圈，并且在我通过componentDidMount函数设置了值之后就不会发生动画。如果我通过上级组件的props设置了值，则会发生动画确实。我想念什么吗？我是React的新手，所以它可能很简单。预先感谢！

Answer 1

解决方案的问题是，无论您是否获取调用，您总是在渲染动画。

我想在解决之前在这里解释几件事

在componentDidMount中进行调用之前，将isLoaded设置为true

获得成功/错误响应后，将isLoaded设置为false

获得成功响应后，还应该将错误状态更改为null，以使其第二次正常工作

当您收到错误响应时，还应该将百分比状态更改为null，以使其第二次工作

在isLoaded为true时显示加载程序，错误和百分比都为空

当百分比不为null，isLoaded为false并且错误为null时显示成功响应

在错误不为null，isLoaded为false并且percent为null时显示错误响应

这是我通常在应用程序中所做的事情

import React from 'react';

class Circle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            percent: null
        };
    }    

    componentDidMount() {
        const url = "base url here" + this.props.endpoint;
        this.setState({
            isLoaded: true
        });
        fetch(url)
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: false,
                        percent: result.percent,
                        error: null
                    });
                },
                (error) => {
                    this.setState({
                        isLoaded: false,
                        error: error,
                        percent: null
                    });
                }
            )
    }

    render() {
        const { isLoaded } = this.state;
        return (
            <div className={"col-md-" + this.props.size + " progress-circles"} data-animate-on-scroll="on">
                {isLoaded && percent == null && error == null && (<div className="progress-circle" data-circle-percent={"" + this.state.percent + ""} data-circle-text="">
                <h4>{this.props.title}</h4>
                    <svg className="progress-svg">
                        <circle r="80" cx="90" cy="90" fill="transparent" strokeDasharray="502.4" strokeDashoffset="0"></circle>
                        <circle className="bar" r="80" cx="90" cy="90" fill="transparent" strokeDasharray="502.4" strokeDashoffset="0"></circle>
                    </svg>
                </div>)}
                {!isLoaded && percent != null && <h2>Success response</h2>}
                {!isLoaded && error != null && <h2>error occured</h2>}
            </div>
        );
    }}

    export default Circle;

希望这可以回答您的查询

React JS自定义组件动画

1 个答案: