javascript - 渲染没有返回任何内容，但我不知道为什么

Question

github 上的 Circular-Progressbar 存储库，用于为我的网站设计仪表板，但当我尝试运行它时。我收到一条错误消息:

Uncaught Invariant Violation: Circle(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. I cannot figure out why.

Circle.js 文件在我的主 App 文件中呈现

import React, { Component } from 'react';

import {CircularProgressbar,buildStyles} from "react-circular-progressbar";
import { easeQuadInOut } from "d3-ease";
import AnimatedProgressProvider from "./AnimatedProgressProvider";
import 'react-circular-progressbar/dist/styles.css';

class Circle extends Component{
    constructor(){
        super();
        this.state={
            category:"",
            percentage:""
        };
    }

    render(){
        <AnimatedProgressProvider valueStart={0} valueEnd={66} duration={1.4} easingFunction={easeQuadInOut}>
          {(value) => {
            const roundedValue = Math.round(value);
            return (
              <CircularProgressbar value={value} text={`${roundedValue}%`} styles={buildStyles({ pathTransition: 'none' })} />
            );
          }}
        </AnimatedProgressProvider>
      }
}

export default Circle;

Circle.js中使用了AnimatedProgressProvider.js文件

import React, {Component} from "react";
import { Animate } from "react-move";

class AnimatedProgressProvider extends Component {
  interval = undefined;

  state = {
    isAnimated: false
  };

  static defaultProps = {
    valueStart: 0
  };

  componentDidMount() {
    if (this.props.repeat) {
      this.interval = window.setInterval(() => {
        this.setState({
          isAnimated: !this.state.isAnimated
        });
      }, this.props.duration * 1000);
    } else {
      this.setState({
        isAnimated: !this.state.isAnimated
      });
    }
  }

  componentWillUnmount() {
    window.clearInterval(this.interval);
  }

  render() {
    return (
      <Animate
        start={() => ({
          value: this.props.valueStart
        })}
        update={() => ({
          value: [
            this.state.isAnimated ? this.props.valueEnd : this.props.valueStart
          ],
          timing: {
            duration: this.props.duration * 1000,
            ease: this.props.easingFunction
          }
        })}
      >
        {({ value }) => this.props.children(value)}
      </Animate>
    );
  }
}

export default AnimatedProgressProvider;

如能提供任何帮助，我们将不胜感激!

Answer 1

您需要在 render 中显式返回 JSX:

render(){
    return (
        <AnimatedProgressProvider valueStart={0} valueEnd={66} duration={1.4} easingFunction={easeQuadInOut}>
            {(value) => {
                const roundedValue = Math.round(value);
                return (
                    <CircularProgressbar value={value} text={`${roundedValue}%`} styles={buildStyles({ pathTransition: 'none' })} />
                );
            }}
        </AnimatedProgressProvider>
    )
}