Question

我编写了这个有效的代码

(async function() {
  try {
    const response = await axios.get('http://localhost:8080/api/tools');
    console.log(response.data[0])
  } catch(err) {
    console.log(err);
  }
})();

但是我想把它写成一个类组件，所以我尝试了

function Circle(props) {
   var style = {
      backgroundColor: "white",
      border: "1px solid black",
      borderRadius: "100%",
      paddingTop: "98%"
   }
   return (<div style={style}></div>)
}

我得到的错误是

class Circle extends React.Component {         
   var style = {
      backgroundColor: "white",
      border: "1px solid black",
      borderRadius: "100%",
      paddingTop: "98%"
   };   
   render() { return(
      <div style={style}></div>
   )}
}

我用Google搜索了相当数量的文章

https://medium.freecodecamp.org/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00

基于此，我尝试了各种关键字，例如SyntaxError: Inline Babel script: Unexpected token, expected ( (3:13) 1 | 2 | class Circle extends React.Component { > 3 | var style = { static和cost，但似乎没有任何效果。

来自java世界，为什么我不能将这种风格作为我班级的财产？

不要激怒我，我刚刚开始学习反应，我在问之前做了谷歌。

https://codepen.io/knows_not_much/pen/mXXEov

Answer 1

根据ES6课程规范，这是无效的。

您可以在构造函数中初始化您的样式：

class Circle extends React.Component {       
   constructor(props) {
     super(props);
     this.style = {
       backgroundColor: "white",
       border: "1px solid black",
       borderRadius: "100%",
       paddingTop: "98%"
     };
   }     
   render() { return(
      <div style={this.style}></div>
   )}
}

当然只是在课外：

const style = {
      backgroundColor: "white",
      border: "1px solid black",
      borderRadius: "100%",
      paddingTop: "98%"
};

class Circle extends React.Component {       
   render() { return(
      <div style={style}></div>
   )}
}

或另一种方法，一个吸气剂：

class Circle extends React.Component {

   get style() {
      return {
          backgroundColor: "white",
          border: "1px solid black",
          borderRadius: "100%",
          paddingTop: "98%"
      };
   }

   render() { return(
      <div style={this.style}></div>
   )}
}

Answer 2

var在类定义空间中无效。你可以简单地把它关掉：

＆＃13;

class Foo {
   style = "bar";
}

var foo = new Foo();
console.log(foo.style);

＆＃13;

将功能组件转换为类组件

2 个答案: