时间戳

首页 > 解决方案 > 在我的反应应用程序中获取对象中数组的所有图像

javascript - 在我的反应应用程序中获取对象中数组的所有图像

问题描述

当我在某篇文章上时，我想显示数组的所有图像。

现在，我能够显示该阵列的图像，但不是全部。

很确定我需要循环遍历该数组，但我不知道如何。

这是我存储数据的地方（图像的标题、文本和位置）

const ARTICLES = {
  0: {
    title: "Autoportrait",
    text: " dessin de moi",
    img: ["/img/autoportrait.jpg", "/img/bagel.jpg", "/img/ilu.jpg"]
  },
  1: {
    title: "bagel",
    text: " bagel de couleur",
    img: ["/img/bagel.jpg"]
  },
  2: {
    title: "Gros &",
    text: " et et et et et",
    img: ["/img/ilu.jpg"]
  },
  3: {
    title: "malo",
    text: " malo",
    img: ["/img/malo.jpg"]
  },
  4: {
    title: "expo",
    text: " expo",
    img: ["/img/expo.jpg"]
  }
};

在这里，我想循环遍历图像数组中的所有图像。如果只有一张图像，则仅显示一张，如果更多则显示更多。

const ArticleItem = props => [
  <h2>{ARTICLES[props.match.params.id].title}</h2>,
  <img
    src={ARTICLES[props.match.params.id].img[0]}
    alt={ARTICLES[props.match.params.id].img.length}
  />,
  <p>
    Back to <Link to="/articles">Articles</Link>
  </p>
];
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

谢谢你

* 编辑 *

整个文档

import React from "react";
import { Switch, Route, Link } from "react-router-dom";

const ARTICLES = {
  0: {
    title: "Autoportrait",
    text: " dessin de moi",
    img: ["/img/autoportrait.jpg", "/img/bagel.jpg", "/img/ilu.jpg"]
  },
  1: {
    title: "bagel",
    text: " bagel de couleur",
    img: ["/img/bagel.jpg"]
  },
  2: {
    title: "Gros &",
    text: " et et et et et",
    img: ["/img/ilu.jpg"]
  },
  3: {
    title: "malo",
    text: " malo",
    img: ["/img/malo.jpg"]
  },
  4: {
    title: "expo",
    text: " expo",
    img: ["/img/expo.jpg"]
  }
};

const App = () => [<Navigation />, <Content />, <Footer />];

const Navigation = () => (
  <ul class="navBar">
    <li>
      <Link to="/">Home</Link>
    </li>
    <li>
      <Link to="/articles">Articles</Link>
    </li>
    <li>
      <Link to="/about">About</Link>
    </li>
  </ul>
);

const Content = () => (
  <Switch>
    <main>
      <Route exact path="/" component={Home} />
      <Route path="/articles" component={Article} />
      <Route path="/about" component={About} />
    </main>
  </Switch>
);

const Footer = () => <footer>footer</footer>;

const Home = () => <h1>My Home Page</h1>;

const About = () => <h1>My About Page</h1>;

const Article = () => [
  <h1>My Article List and Item Page (Note: Title shows up for both Pages)</h1>,
  <Switch>
    <Route exact path="/articles" component={ArticleList} />
    <Route path="/articles/:id" component={ArticleItem} />
  </Switch>
];

const ArticleList = () => [
  <h2>All Articles</h2>,
  <ul class="projets">
    {Object.keys(ARTICLES).map(key => (
      <li key={key} class="projet">
        <Link to={`/articles/${key}`}>
          <img
            class="imgCover"
            src={ARTICLES[key].img[0]}
            alt={ARTICLES[key].img.length}
          />
        </Link>
      </li>
    ))}
  </ul>
];

// ArticleItem has access to the router props and thus to the id of the article in the url

const ArticleItem = props => [
  <h2>{ARTICLES[props.match.params.id].title}</h2>,
  <img
    src={ARTICLES[props.match.params.id].img[0]}
    alt={ARTICLES[props.match.params.id].img.length}
  />,
  <p>
    Back to <Link to="/articles">Articles</Link>
  </p>
];

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

标签： javascriptarraysreactjs

解决方案

所以你的组件ArticleItem应该是：

const ArticleItem = props => {
	return (
	<div>
		<h2>{ARTICLES[props.match.params.id].title}</h2>
		{ARTICLES[props.match.params.id].img.map((img, k)=>
			<img key={k} src={img} />
		)}
		<p>Back to <Link to="/articles">Articles</Link></p>
	</div>)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我希望它有帮助

推荐阅读