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

IT技术 javascript css reactjs
2021-04-30 10:03:56

我正在尝试在我的 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"));

但不应用样式。我怎样才能做到这一点?

2个回答

您不能在类中间定义常量,这是无效的语法。根据定义1类体只能包含方法定义、静态方法定义和空语句 ( ;) 2定义divStyle内部方法:

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

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

1根据 ECMAScript 2015 语言规范,第 14.5 节 - 类定义

2 Babel目前支持类属性(带插件)。您还可以通过构造函数分配一个实例变量,this.style = { ... }并在类中的任何地方使用this.style.

在页面底部(在类声明下方),您可以定义一个样式对象:

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

然后将其传递给组件样式props:

style={styles.exampleStyle}

我更喜欢这样做,因为您可以将组件的所有样式保存在一个对象中,而不是为类中的每个方法都设置一个样式对象。