为数组的每个元素返回多个 HTML 片段

Question

已编辑--

假设我有一个 JSON 对象数组：

"social":[
      {
        "name":"facebook",
        "className":"fa fa-facebook"
      },
      {
        "name":"linkedin",
        "className":"fa fa-linkedin"
      },
      {
        "name":"instagram",
        "className":"fa fa-instagram"
      },
      {
        "name":"github",
        "className":"fa fa-github"
      }
]

如何为每个对象创建一个 sn-p 以便它们返回

<p>{social.name}<p> 

而且我不想使用地图。

这是一个更复杂的例子，但这似乎是我面临的问题（即我有下面格式的数据，我需要从每个元素中获取属性来显示，我只有一个功能）

Answer 1

假设social是状态的一部分，你可以实现一个方法，将social数组中的每一项映射到p标签：

renderSocialNames = () => {
  return this.state.social.map(
    socialItem => <p key={socialItem.className}>{socialItem.name}</p>
  );
}

这里有一个Working Sample StackBlitz 供您参考。

Answer 2

更简洁的代码:)，这可能会解决您的问题

import React, { Component } from "react";

class Projects extends Component {
  constructor(props) {
    //initialize this component with props
    super(props);
  }

  render() {
    const { data } = this.props;
    if (data) {
      const projects = data.map(project => {
        return (
          <a className="cell" data-remodal-target={project.id}>
            <img
              className="grid-image"
              src={project.cover}
              data-aload={projects.cover}
              alt={project.name}
            />
          </a>
        );
      });

      const modals = data.map(project => {
        return (
          <div className="remodal" data-remodal-id={project.id}>
            <button
              data-remodal-action="close"
              className="remodal-close"
            ></button>
            <h1>Remodal</h1>
            <p>
              Responsive, lightweight, fast, synchronized with CSS animations,
              fully customizable modal window plugin with declarative
              configuration and hash tracking.
            </p>
            <br />
            <button data-remodal-action="cancel" className="remodal-cancel">
              Cancel
            </button>
            <button data-remodal-action="confirm" className="remodal-confirm">
              OK
            </button>
          </div>
        );
      });
    }

    return (
      <section id="projects">
        <div className="grid-container remodal-bg">
          {projects}
          {modals}
        </div>
      </section>
    );
  }
}