Question

为什么当我们在render函数之外声明一个对象并在返回组件的render函数时使用它会导致意外的令牌错误。如果我在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;

谢谢

Answer 1

首先，由于您使用的是ES6类语法，因此应使用const或let来定义变量。

尽管如此，最佳解决方案是将变量设置为组件的状态。因此，您可以稍后轻松操作状态，并在需要时使用this.setState();重新呈现组件。

你会这样做：

你可以在构造函数方法中做到 -

constructor(props){
    super(props);

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

之后，您可以使用ES6扩展运算符轻松地将CSS应用于您喜欢的任何组件。

无法使用在render函数外声明的变量

1 个答案: