使用对象数组中的 propTypes 反应组件答案

【问题标题】：React Components with propTypes from array of objects使用对象数组中的 propTypes 反应组件
【发布时间】：2019-07-14 16:00:30
【问题描述】：

我在使用带有对象数组的 propTypes 创建 React 组件时遇到了一些问题。

所以我有这个对象数组：

var movies = [
  {
    id: 1,
    title: "Harry Potter",
    desc: "Wizzard Movie",
    src:
      "https://ocdn.eu/pulscms-transforms/1/isDktkqTURBXy9kMmM4YmI4N2QzY2U0ZjI5NmIzNTU3Mjk2ZTg2ZWY2My5qcGVnkZMCAM0B5A"
  },
  {
    id: 2,
    title: "LK",
    desc: "Movie about Lion King",
    src: "https://1.fwcdn.pl/an/np/1985708/2016/5817_1.7.jpg"
  },
  {
    id: 3,
    title: "Pulp Fiction",
    desc: "xxx",
    src:
      "https://coubsecure-s.akamaihd.net/get/b44/p/coub/simple/cw_timeline_pic/2d2d519173e/5f0067e9d4849ef1dee4a/big_1518161198_image.jpg"
  },
  {
    id: 4,
    title: "Lethal Weapon 3",
    desc: "Movie about..",
    src: "https://media.teleman.pl/photos/lethal-weapon-3.jpg"
  }
];

我想做的是： 1.为我要创建的每个组件创建类： - 电影类应该有：标题、描述和图像。所以我必须为每个元素（title，desc，img）制作propType？

var Movie = React.createClass({
  render: function() {
    return (
      React.createElement(
      "li",
      { key: movie.id },
      React.createElement(MovieTitle, {}),
      React.crreateElement("p", {}, this.props.movie.desc),
      React.createElement("img", { src: this.props.movie.src })
    ));
  },
  propTypes: {
    image: React.PropTypes.object.isRequired,
    des: React.PropTypes.object.isRequired,
    title: React.PropTypes.object.isRequired
  }
});

- Movie Title Class

var MovieTitle = React.createClass({
  render: function() {
    return React.createElement("h2", {}, this.props.movie.title);
  },
  propTypes: {
    title: React.PropTypes.object.isRequired
  }
});

- MovieDescription Class

var MovieDescription = React.createClass({
  render: function() {
    return React.createElement("p", {}, this.props.movie.desc);
  },
  propTypes: {
    desc: React.PropTypes.object.isRequired
  }
});

- Movie Image Class

var MovieImage = React.createClass({
  render: function() {
    return React.createElement("img", {src: this.props.movie.src})
  }, 
  propTypes: {
    image: React.ProTypes.object.isRequired
  }
});

我想对对象数组进行映射并创建电影元素并将它们放入渲染中，然后将整个列表放入 div#app。

问题是，我可以使用 movies.map 方法制作它，并为每个元素制作一个“循环”。

var moviesElements = movies.map(function(movie) {
  return React.createElement(
    "li",
    { key: movie.id },
    React.createElement("h2", {}, movie.title),
    React.createElement("p", {}, movie.desc),
    React.createElement("img", {}, movie.src)
  );
});

var element = React.createElement(
  "div",
  {},
  React.createElement("h1", {}, "List of movies"),
  React.createElement("ul", {}, moviesElements)
);

ReactDOM.render(element, document.getElementById("app"));

但我不知道如何处理所有这些由类和 propTypes 组成的组件。

如果有任何帮助，我将不胜感激：)

【问题讨论】：

快速浏览后我可以告诉你，你的Movie 类应该有一个名为movie 的prop，它是object 类型的。在您的 Movie 组件中，您正在渲染 h2、p 和 img。无需为此构建额外的组件。
欧爷，一个电影道具就够了。但如果我们谈论的是额外的组件，情况就是如此。为每个元素制作组件然后用组件创建整个列表是任务的一部分。所以我想要制作的每个元素都必须有一个类:(
对，你可能正在寻找这个：codesandbox.io/s/l941jvkj37
谢谢，太好了！

标签： javascript reactjs components react-proptypes

【解决方案1】：

您可以只映射电影并使用类组件作为第一个参数创建一个反应元素。

var moviesElements = movies.map(function(movie) {
  return React.createElement(Movie, {movie: movie});
});

我做了一个code sandbox example（还修复了您共享的代码中的一些拼写错误和缺少的参数）

【讨论】：

谢谢，非常好，我喜欢。