在 JSX 中内联动态 CSS 样式答案

【问题标题】：Inlining dynamic css style in JSX在 JSX 中内联动态 CSS 样式
【发布时间】：2018-03-01 13:16:59
【问题描述】：

我有一百张图片，我想将它们作为背景添加到我的页面中的 100 个 div 元素中。

我有一个共同的风格（style），然后我有可变部分，即图像。我使用 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>

【问题讨论】：

一目了然，您的代码看起来是正确的（最后一部分）。你试过了吗？
你知道吗？我没有 :) 我只是在猜测解决方案可能是什么样子 :) 我现在就试试
这里只使用一个循环，而不是声明 100 个样式和 100 个图像会不会更容易？
那部分是正确的，但是有一个小的隐藏问题，问题是Object.assign(style, ....) 也将始终更新样式对象，而不是使用Object.assign({}, style, .....) 或spread operator。更多详情请查看MDN Doc
是的，谢谢你的工作。正如 Mayank 所说，我需要 {} 作为第一个参数来防止覆盖。

标签： css reactjs ecmascript-6 jsx

【解决方案1】：

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

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

顺便说一句 - 所有这些都应该在一个循环中完成，可能使用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} />
        ))
    );
}

【讨论】：

【解决方案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>

【讨论】：