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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

但是没有应用样式。我该如何实现？

回答：

您不能在类的中间定义常量，这是无效的语法。根据定义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当前支持类属性（带有plugins）。您还可以通过使用构造函数来分配实例变量，this.style = { ...

}并使用在类中的任何位置访问它this.style。

以上是 在React类中添加存储在变量中的样式 的全部内容， 来源链接： utcz.com/qa/410946.html

回到顶部