如何在 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。我正在应用包含数据类的 div dataDiv，该数据类是在我的App.css文件中定义的。另外，我想为 div 设置背景图像。我到底想要做的是，如果数据条目包含一个名为 I 的字段，imageUrl我想使用该 url 作为背景图像的 url，否则，如果它为 null 或空，我想使用我找到的默认 url互联网。在 React 中处理这个问题的正确方法是什么？上面的代码段似乎不起作用，尤其是函数内部的 if-else 语句renderData。我怎样才能修复这个代码，或者有什么方法可以更优雅地处理这个问题，可能是在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>
  )
}