javascript - 如何在 React 中为 div 设置背景图片？

Question

我正在创建一个 React 应用程序，我有一个或多或少像这样定义的组件:

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 或为空，我想使用我从互联网上找到的默认网址。在 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>
  )
}