时间戳

首页 > 解决方案 > React：如何在通过渲染进行映射时使用内联样式

javascript - React：如何在通过渲染进行映射时使用内联样式

问题描述

我试图在通过我的 Render() 中的项目数组映射时动态使用项目的 ID。我怎样才能从我已经拥有的渲染映射中做到这一点？

  render() {
    return (
      <div className="container">
        <h1>New Houte</h1>
        {this.state.items.map(item => 
            <div className="item-container" key={item.id}>
              <div style={ { backgroundImage: 'url("../../images/' +{item.id} + ')' } } className="image-container" key="image">

标签： javascriptreactjs

解决方案

另一种方法是使用模板文字。

在您的情况下，使用反引号（数字 1 左侧的键）就像这样

`{ { backgroundImage: `url("../../images/${item.id}")` } }`.

推荐阅读