在 React 中将 Props 映射到数组

Question

所以我想迭代一些传递给我的反应组件的道具，并根据传递的 links 的数量构建一组动态的 html 元素道具。下面的示例将只呈现第一个 link。

import React from "react";
import ReactDOM from "react-dom";

const Links = (props) => {
   return (
      <div>
        <p>{props.link.link1}</p>
      </div>
    )
  }

export default Links;

我无法弄清楚如何映射传入的道具，以便为道具对象中的每个 link 生成一个 p 标签。 link 是从一个更大的 json 对象中提取出来的，并作为 props 传递给上面的组件。

"links": {
      "link1": "https://www.google.com",
      "link2": "https://www.google.com",
      "link3": "https://www.google.com",
      "link4": "https://www.google.com",
      "link5": "https://www.google.com",
      "link6": "https://www.google.com"
 }

我试过类似下面的方法，但无法正常工作。我需要让我的 React 组件基于 class 吗？并引入一个构造函数/渲染方法来正确地做到这一点？

const buildLinks = this.props.data.map(release => {
    render (
        /// p tags + props go here
    )
})

Answer 1

使用 Object.keys() 将对象转换为数组，并使用 Array.map():

创建 JSX

const props = {
  "links": {
    "link1": "https://www.google.com",
    "link2": "https://www.yahoo.com",
    "link3": "https://www.facebook.com",
    "link4": "https://www.twitter.com",
    "link5": "https://www.instagram.com",
    "link6": "https://www.gmail.com"
  }
};

const Links = ({ links }) => {
   return (
      <div>
        {
          Object.keys(links).map((link) => (
            <p key={link}>{ links[link] }</p>
          ))
        }
      </div>
    )
  }

ReactDOM.render(
  <Links {...props} />,
  demo
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

Answer 2

var link = {
  "links": {
    "link1": "https://www.google.com",
    "link2": "https://www.yahoo.com",
    "link3": "https://www.facebook.com",
    "link4": "https://www.twitter.com",
    "link5": "https://www.instagram.com",
    "link6": "https://www.gmail.com"
  }
}

var newlink = Object.values(link)

console.log(Object.values(newlink[0]))

然后你可以映射它们。随心所欲

在 React 中将 Props 映射到数组

Mapping Props to an Array in React

javascript

reactjs

react-props