javascript - 如何将内联样式和类名应用于同一元素

Question

我有一个 div，它有一个相当长的样式列表，应用内联看起来很荒谬，但是，div 采用背景图像 url 的参数，该参数将在更新状态时发生变化。

内联样式，我的元素看起来像这样:

      <div style={{width: 55,
                  height: 55,
                  position: 'fixed',
                  borderRadius: '50%',
                  bottom: 130,
                  zIndex: 200,
                  backgroundImage: `url(${this.state.avatar})`}}>

但是，当我这样做时，我的背景图像完全消失了:

<div className="avatar" style={{backgroundImage: `url(${this.state.avatar})`}}>

这里的修复是什么？

Answer 1

我使用 create-react-app 创建了一个示例元素并使用了以下代码，它对我有用:

App.js:

import React, {Component} from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {avatar: 'https://www.gstatic.com/webp/gallery3/1.png'}
  }

  render() {
    return (
      <div className="avatar" style={{backgroundImage: `url(${this.state.avatar})`}}>
        something here...
      </div>
    );
  }
}

export default App;

和 App.css:

.avatar {
  width: 500px;
  height: 500px;
  position: fixed;
  border-radius: 50%;
  bottom: 130px;
  z-index: 200;
}