reactjs - 无法使用在渲染函数外声明的变量

Question

为什么当我们在 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 应用于您喜欢的任何组件。