如何在 reactjs 中从道具中添加图像背景

Question

我正在使用 reactjs 构建一个网站。我有一个 js 文件，它从另一个文件中提取道具，该文件是一个名为sections 的数组，其中包含title 和imageurl 之类的数据。我需要使用imageuURL 的道具作为每个元素的背景。我尝试使用样式，但它不起作用。

下面是提取代码：

import React from 'react'

const Menuitem = (props) => {
    return(
        <div>
            <h1 className='title'>{props.title}</h1>
            <span className='subtitle'>shop now</span>
        </div>
    )
}

我使用以下函数通过 app.js 中的数组传递该代码：

function extract(item) {
  return <Menuitem title={item.title}/>
}

然后使用map函数返回结果

  function App() {
      return (
          <div className=''>
              {sections.map(extract) }
          </div>
      );
  }

我得到的结果就像图像一样。我需要从数组文件中获取每个部分的背景图像
(imageURl 道具)

react js problem

Answer 1

如果 imageURL 在传递给菜单项的道具中，您可以将其放入内联

const Menuitem = (props) => {
    return(
        <div style={{ backgroundImage: `url(${props.imageUrl})` }}>
            <h1 className='title'>{props.title}</h1>
            <span className='subtitle'>shop now</span>
        </div>
    )
}