Reactjs 无法使用在呈现函数外部声明的变量

为什么当我们在渲染函数之外声明一个对象并在组件的渲染函数返回时使用它会导致意外的标记错误。如果我在render函数中声明myStyle对象，下面的代码将正常工作

import React , { Component } from 'react';


class Test extends Component {

  var myStyle={
      backgroundColor:"red",
      width:"100px",
      height:"100px",
      margin:"0 auto",
      marginTop:"50px"
  };

  render(){
    return(
       <div style={myStyle}>

      </div>
    );
  }
}

export default Test;

import React，{Component}来自'React'；
类测试扩展了组件{
我的风格={
背景颜色：“红色”，
宽度：“100px”，
高度：“100px”，
边距：“0自动”，
玛金托普：“50像素”
};
render（）{
返回(
);
}
}
导出默认测试；

---

首先感谢因为您使用的是ES6类语法，所以应该使用

const

或

let

来定义变量

不过，最好的解决方案是将变量设置为组件的状态。因此，您可以稍后轻松地操纵状态，并在需要时使用

this.setState（）重新加载组件

你可以这样做：

在构造函数方法中，您将执行以下操作-

constructor(props){
    super(props);

    this.state = {
        myStyle: {
            backgroundColor:"red",
            width:"100px",
            height:"100px",
            margin:"0 auto",
            marginTop:"50px"
        }
    }
}

之后，您可以使用ES6 spread操作符轻松地将CSS应用于您喜欢的任何组件。
删除
var
或在类外声明它@Gabriel Bieu删除var给了我一个未定义的错误，但在类外声明它起到了作用-谢谢。您可以在构造函数（）内声明babel const来添加它不会被访问outside@JayabalajiJ啊，是的，我的错。我会把那个部分编辑掉。@Bojan Ivanac，谢谢你的解释，我以后会继续解释，所以我们不应该在函数之外声明变量。我试着使用let和const，但它给我带来了相同的错误。@Shyam是的，React是关于分离功能的。如果需要在整个组件中使用一个值，可以使用state。变量几乎只用于编写它们的函数。如果您在编写该变量的函数之外需要该变量，您可以将该变量设置为状态，并直接从状态使用它。@Bojan Ivanac非常感谢，我只需要一个确认，以便我可以在规则列表中注意到这一点。解释得很好。