Question

我有一百张图片，我想在其页面中添加100个 div 元素作为背景。

我有一个共同的风格（风格），然后我有变量部分，即图像。我使用 Object.assign 创建 style1，style2，style3 等，它将静态与变量部分合并。

它看起来像这样：

let style = {width:w, height:h, backgroundColor:'red', border :'5px solid red'}

let style1 = Object.assign(style, {backgroundImage:"url(" + img1 + ")"});
let style2 = Object.assign(style, {backgroundImage:"url(" + img2 + ")"});
....
let style100 = Object.assign(style, {backgroundImage:"url(" + img100 + ")"});


return (
  <div>
      <div style={style1}>1</div>
      <div style={style2}>2</div>
      <div style={style3}>3</div>

    ...

      <div style={style99}>99</div>
      <div style={style100}>100</div>
  </div>
);

这看起来很难看......

是否有“内联”方式？像这样：

<div style={Object.assign(style, {backgroundImage:"url(" + img1 + ")")}>1</div>
<div style={Object.assign(style, {backgroundImage:"url(" + img2 + ")")}>2</div>

Answer 1

您可以使用proposal-object-rest-spread（您需要babel的Object rest spread transform）将背景图片与样式对象合并。此外，您可以使用template literal将img动态部分注入静态部分：

<div style={{ ...style, backgroundImage: `url(${img1})` }}>1</div>

btw - 所有这些都应该在一个循环中完成，可能使用Array#map，你可能想为每个图像创建一个组件。

你将拥有一系列图像['img1'，'img2'，'img3'等...]。

图像组件将是这样的：

const Image = ({ style, img, text }) => (
    <div style={{ ...style, backgroundImage: `url(${img}.png)` }}>{text}</div>
);

外部组件的渲染可能如下所示：

render() {
    const {images} = this.props;

    return (
        images.map((img, index) => (
            <Image style={style} img={img} text={index} key={img} />
        ))
    );
}

Answer 2

@OriDrori's answer的一小部分，您还可以将对象数组传递给样式道具。

<div style={[style, { backgroundImage: `url(${img1})` }]}>1</div>

所以这也意味着你可以创建一个可以返回具有正确背景图像的对象的小函数

const getBackgroundImage = (image) => {
  return { backgroundImage: `url(${image})` };
}

<div style={[style, getBackgroundImage(img1)]}>1</div>

在JSX中内联动态css样式

2 个答案: