Question

在一个小型测试应用程序中，引号（img，url）内的变量不起作用。如果我将它们放在h1元素中或其他任何地方，它将呈现正确的内容。

render() {
  return (
    <div className="row">
      {this.state.pages.map((page, index) => {
        return (
          <div
            key={index}
            className="page-listing-element col-lg-3 col-md-6 col-sm-12 p-2 box-shadow overflow-hidden"
          >
            <div>
              <h1>
                {page.url} - {page.image}
              </h1>
              <a href="{page.url}" rel="nofollow">
                <img src="{page.image}" />
              </a>
              <h3>
                <a href="{page.url}">{page.name}</a>
              </h3>
            </div>
          </div>
        );
      })}
    </div>
  );
}

在我的浏览器中：

<div>
  <h1>
    /fr/see-do/patrimoine-culture/ -
    http://localhost:8001/static/img/main/no_image.jpg
  </h1>

  <a href="{page.url}" rel="nofollow">
    <img src="{page.image}" />
  </a>

  <h3>
    <a href="{page.url}">Patrimoine et culture</a>
  </h3>
</div>

Answer 1

通过将它们添加到strings中来将它们用作quotes。您只需要删除引号就可以了。

<a href={page.url} rel="nofollow">
  <img src={page.image} />
</a>

网址和img变量未在我的React应用中呈现

1 个答案: