javascript - react : how to use inline styling while mapping through a render

Question

我正在尝试在通过 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">

Answer 1

不要做:

<div style={ { backgroundImage: 'url("../../images/' +{item.id} + ')' } } className="image-container" key="image">

但是做:

<div style={ { backgroundImage: 'url("../../images/' + item.id + '")' } } className="image-container" key="image">

或者:

<div style={ { backgroundImage: `url("../../images/${item.id}")` } } className="image-container" key="image">

您在 JSX 中打开大括号 {} 进行评估。在这里，你只是在一个字符串中，所以它是原始 JS，这就是它不起作用的原因:)