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

Question

我想在阅读某篇文章时显示数组的所有图像。

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

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

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

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>

Answer 1

所以你的组件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>

希望对你有帮助