Question

我试图在我的React类中使用一些样式。我之前做过：

<div style={{background: "red"}}></div>

我想改用变量，例如：

<div style={divStyle}></div>

我的代码如下：

class HolaMundo extends React.Component {
  const divStyle = {
    color: 'blue',
  };
  render() {
    return(
      <div className="container" style={divStyle}> 
        <h1> Hola {this.props.name}</h1>
      </div>
    );
  }
}

ReactDOM.render(<HolaMundo name="One" />, document.getElementById("app"));

但样式不适用。我怎样才能做到这一点？

Answer 1

你不能在类的中间定义一个常量，这是无效的语法。根据定义¹，类主体只能包含方法定义，静态方法定义和空语句（;）²。在方法中定义divStyle：

class HolaMundo extends React.Component {
    render() {
        const divStyle = {
            color: 'blue',
        };

        return (
          <div className="container" style={divStyle}> 
            <h1>Hola {this.props.name}</h1>
          </div>
        );
    }
}

¹根据ECMAScript 2015语言规范，Section 14.5 - Class Definitions

² Babel目前支持类属性（plugins）。您还可以通过构造函数使用this.style = { ... }分配实例变量，并使用this.style在类中的任何位置访问它。

Answer 2

在页面底部（类声明下方），您可以定义样式对象：

 const styles = {
  exampleStyle: {
    backgroundColor: 'red',
  }
};

然后将其传递给组件样式prop：

style={styles.exampleStyle}

添加存储在React类中的变量中的样式

2 个答案: