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

Question

我正在使用 reactjs 建立一个网站。我有一个 js 文件，该文件从另一个文件中提取道具，该文件是一个数组sections，使用类似titleand的数据调用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 prop ）中获取每个部分的背景图像

反应js问题

标签： cssreactjs

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