React.js：在地图函数中将图像设置为div背景

Question

尝试在 React.js 项目中将图像设置为地图函数内的 div 背景，但我无法访问地图函数外的post.featured_image_src并在divStyle变量中设置为背景：

class Archive extends Component {
    render() {
        let allPosts = DataStore.getAllPosts();
        let pageData = DataStore.getPageBySlug('archive');
        let acf = pageData.acf;

        const divStyle = {
          backgroundImage: 'url(' + post.featured_image_src + ')'
        }

        return (
            <div>
                <h1>{pageData.title.rendered}</h1>
                <div className="post-container">
                  <div className="post-wrapper">
                    {allPosts.map((post, i) => {
                      return (
                        <div className="post" key={i}>
                          {post.featured_image_src
                            ? <a href={post.link}><div style={divStyle}/></a>
                            : null}
                          <h3 className="post-title"><a href={post.link} dangerouslySetInnerHTML={{__html:post.title.rendered}} /></h3>
                        </div>
                      )
                    }
                  )}
                </div>
              </div>
            </div>
        );
    }
}

任何提示都会非常可爱.. <3

Answer 1

问题是post当您尝试访问它来定义样式时未定义

  const divStyle = {
      backgroundImage: 'url(' + post.featured_image_src + ')'
    }

您可以将此逻辑作为函数移动

     const divStyle = (src) => ({
      backgroundImage: 'url(' + src + ')'
    })

    return (
        <div>
            <h1>{pageData.title.rendered}</h1>
            <div className="post-container">
              <div className="post-wrapper">
                {allPosts.map((post, i) => {
                  return (
                    <div className="post" key={i}>
                      {post.featured_image_src
                        ? <a href={post.link}><div style={divStyle(post.featured_image_src)}/></a>
                        : null}
                      <h3 className="post-title"><a href={post.link} dangerouslySetInnerHTML={{__html:post.title.rendered}} /></h3>
                    </div>
                  )
                }
              )}
            </div>
          </div>
        </div>
    );