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> ) }

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'
            }}
          >

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

2 个答案: