未在React本机中定义函数

Question

我在原生react中创建了一个循环进度条，错误是get is rotateByStyle‘is not defined。

这是我在一篇文章的帮助下设计的代码。这必须根据某些参数绘制具有进度的圆。我使用ES6来定义该函数

import React,{Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';  

rotateByStyle = (percent, base_degrees, clockwise) => {
  let rotateBy = base_degrees;

  if(clockwise) {
    rotateBy = base_degrees + (percent * 3.6);
  } else {
    //anti clockwise progress
    rotateBy = base_degrees - (percent * 3.6);
  }

  return {
    transform:[{rotateZ: `${rotateBy}deg`}]
  };
}

renderThirdLayer = (percent, commonStyles, ringColorStyle, ringBgColorStyle, clockwise, bgRingWidth, progressRingWidth, innerRingStyle, startDegrees) => {
  let rotation = 45 + startDegrees;
  let offsetLayerRotation = -135 + startDegrees;

  if(!clockwise) {
    rotation += 180;
    offsetLayerRotation += 180;
  }

  if(percent > 50) {
    return <View style=    {[styles.secondProgressLayer,this.rotateByStyle((percent - 50), rotation, clockwise),
    commonStyles, ringColorStyle, {borderWidth: progressRingWidth}    ]}></View>
  } else {
    return <View 
             style={[styles.offsetLayer, innerRingStyle, ringBgColorStyle, {transform:[{rotateZ: `${offsetLayerRotation}deg`}], borderWidth: bgRingWidth}]}>
           </View>
    }
}

const CircularProgress = ({percent, radius, bgRingWidth, progressRingWidth, ringColor, ringBgColor, textFontSize, textFontWeight, clockwise, bgColor, startDegrees}) => {
  const commonStyles = {
    width: radius * 2,
    height: radius * 2,
    borderRadius: radius
  };
}

let firstProgressLayerStyle;
let displayThickOffsetLayer = false;

if(percent > 50){
  firstProgressLayerStyle = this.rotateByStyle(50, rotation, clockwise);
} else {
  firstProgressLayerStyle = this.rotateByStyle(percent, rotation, clockwise);
  if( progressRingWidth > bgRingWidth ) {
    displayThickOffsetLayer = true;
  }
}

let offsetLayerRotation = -135 + startDegrees;
if(!clockwise) {
  offsetLayerRotation += 180;
}


export default CircularProgress;   

我希望看到一个带有进度条的圆形圆圈

Answer 1

解决方案

this.rotateByStyle

=>

rotateByStyle

为什么

this中不包含rotateByStyle。

在方法中，它引用所有者对象。单独来说，这指的是全局对象。在函数中，这指的是全局对象。在函数中，在严格模式下，这是未定义的。在事件中，这指的是接收事件的元素。像call()和apply()这样的方法可以引用任何对象。

官方：JS This

Answer 2

你得到这个错误是因为你需要使用const, let or var关键字来初始化你的变量。

所以在你的例子中，rotateByStyle = ...和renderThirdLayer = ... 变量应该被声明为，使用上面提到的任何一个关键字，例如：- const rotateByStyle = ...，如果它们是定义的，和。

Answer 3

我尝试了const，但它不起作用，所以我使用let

let rotateByStyle = (percent, base_degrees, clockwise) => {
  let rotateBy = base_degrees;

  if(clockwise) {
    rotateBy = base_degrees + (percent * 3.6);
  } else {
    //anti clockwise progress
    rotateBy = base_degrees - (percent * 3.6);
  }

  return {
    transform:[{rotateZ: `${rotateBy}deg`}]
  };
}

let renderThirdLayer = (percent, commonStyles, ringColorStyle, ringBgColorStyle, clockwise, bgRingWidth, progressRingWidth, innerRingStyle, startDegrees) => {
  let rotation = 45 + startDegrees;
  let offsetLayerRotation = -135 + startDegrees;

  if(!clockwise) {
    rotation += 180;
    offsetLayerRotation += 180;
  }

  if(percent > 50) {
    return <View style=    {[styles.secondProgressLayer,this.rotateByStyle((percent - 50), rotation, clockwise),
    commonStyles, ringColorStyle, {borderWidth: progressRingWidth}    ]}></View>
  } else {
    return <View 
             style={[styles.offsetLayer, innerRingStyle, ringBgColorStyle, {transform:[{rotateZ: `${offsetLayerRotation}deg`}], borderWidth: bgRingWidth}]}>
           </View>
    }
}