使用 props 为 div 添加背景

Question

我正在创建一个滑块并使用 prop 向它添加数据。每个幻灯片 div 都有一个标题和一个描述。我还想为每个 div 提供不同的图像背景。是否可以使用 props 向 div 添加背景图像？

这是我的方法，但它不起作用：

const slideData = [

    {

        id: 1,

        heading: "First Heading",

        description: "A short description of the service goes here",

        image: './images/candle.jpg'

    },

    {

        id: 2,

        heading: "Second Heading",

        description: "A short description of the service goes here",

        image: './images/candle.jpg'

    },

    {

        id: 3,

        heading: "Third Heading",

        description: "A short description of the service goes here",

        image: './images/candle.jpg'

    },

    {

        id: 4,

        heading: "Fourth Heading",

        description: "A short description of the service goes here",

        image: './images/candle.jpg'

    }

]

export default slideData

和子组件

import React from 'react';

function Slide(props) {

    return (

        <div className="slide" style={{background: props.image}}>

            <h3> { props.heading} </h3>

            <p> { props.description} </p>

        </div>

    );

}

export default Slide;

Answer 1

也许这个代码片段会帮助你style={{&nbsp;backgroundImage:&nbsp;`url(${props.image})`