我正在用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 prop)中获取每个部分的背景图像
反应js问题
如果imageURL在传递给菜单项的道具中,您可以将其内联
const Menuitem = (props) => {
return(
<div style={{ backgroundImage: `url(${props.imageUrl})` }}>
<h1 className='title'>{props.title}</h1>
<span className='subtitle'>shop now</span>
</div>
)
}