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

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>

我希望对您有帮助

Answer 2

我会遍历ARTICLES而不是生成单个物品并将道具传递给它

伪造文章

const Articles = props => (
  <div>
    {Object.keys(ARTICLES).map(key => {

        <h2>{ARTICLES[key].title}</h2>
        {ARTICLES[key].img.map(i => return (<img src={i} alt={i.length}>) )}
        <p>Back to <Link to="/articles">Articles</Link></p>
    })}
  </div>
);

如果ArticleItem是其自己的组件，则可以将商品数据传递给每个商品

const Articles = props => (
  <div>
    {Object.keys(ARTICLES).map(key => {

        <ArticleItem item={ARTICLES[key]} />
    })}
  </div>
);