如何在 React 中为 div 设置背景图像？

Question

我正在创建一个反应应用程序，并且我有一个或多或少定义如下的组件：

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

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      loading: true,
      error: null
    };
  }

  componentDidMount() {
    var _this = this;
    this.serverRequest = 
      axios
        .get("LinkToAPI")
        .then(result => {
          _this.setState({
            data: result.data,
            loading: false,
            error: null
          });
        })
        .catch(err => {
          _this.setState({
            loading: false,
            error: err
          });
        });
  }

  componentWillUnmount() {
    this.serverRequest.abort();
  }

  renderLoading() {
    return <div>Loading...</div>
  }

  renderError() {
    return (
      <div>
        Something when wrong: {this.state.error.message}
      </div>
    );
  }

  renderData() {
    const { error, data} = this.state;

    if (error) {
      return this.renderError();
    }

    return (
      <div>
        {data.map(d=> {
          if (d.imageUrl) {
            <div className="dataDiv" style="background: url('{d.imageUrl}')" key={d.Id}>{d.name}</div>
          } else {
            <div className="dataDiv" style="background: url('LinkToSomeImage')" key={d.Id}>{d.name}</div>
          }
        }
        )}
      </div>
    )
  }

  render() {
    return (
      <div className="App">
        {this.props.loading ? this.renderLoading() : this.renderData()}
      </div>
    );
  }
}

它基本上从 API 获取 JSON 数据，并使用它呈现一些带有 JSON 内数据的 div。我正在申请包含 dataDiv 类数据的 div，该类在我的 App.css 文件中定义。此外，我想为 div 设置背景图像。我到底想要做的是，如果数据条目包含一个名为imageUrl 的字段，我想将该 url 用作背景图像的 url，否则，如果它为 null 或空，我想使用默认 url我从网上找到的。在 React 中处理这个问题的正确方法是什么？上面的代码段似乎不起作用，尤其是 renderData 函数中的 if-else 语句。我该如何修复这段代码，或者有什么方法可以更优雅地处理这个问题，可能在 CSS 中？

Answer 1

我会这样做 请确保检查 backgroundUrl 是否等于您想要的 CSS。

{data.map(d => {
  let backgroundUrl = "LinkToSomeImage";
  if (d.imageUrl) {
    backgroundUrl = d.imageUrl;
  } 
  
  return (
    <div className="dataDiv" style={{backgroundImage: `url(${backgroundUrl})`}} key={d.Id}>{d.name}</div>
  )
})}

编辑

完整的功能是：

renderData() {
  const { error, data} = this.state;

  if (error) {
    return this.renderError();
  }

  return (
    <div>
      {data.map(d => {
        let backgroundUrl = "LinkToSomeImage";
        if (d.imageUrl) {
          backgroundUrl = d.imageUrl;
        } 

        return (
          <div className="dataDiv" style={{backgroundImage: `url(${backgroundUrl})`}} key={d.Id}>{d.name}</div>
        )
      })}
    </div>
  )
}

Answer 2

          <Box
            onClick={() => {
              history.push({
                pathname: `/p/c/${data.ProductName.replace(/\//g, "~")}/1`
              });
            }}
            css={{
              backgroundImage:`url(${data.imageUrl||"/default-placeholder.png"})`,
              backgroundPosition: 'center',
              backgroundRepeat: 'no-repeat'
            }}
          >