arrays - React 组件数组未映射

Question

因此，我尝试循环访问一些组件，以便可以跟踪组件的高度，以便决定放置分页符。我有一组组件正在尝试映射，但我发现臭名昭著的映射不是函数。这是我的代码。

import React, { Component } from "react";
import styled from "styled-components";
import sizeMe from "react-sizeme";

const WhiteRow = styled.div`
  background-color: #ffffff;

  &:after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: transparent;
    box-shadow: 0 2px 52px -20px rgba(132, 133, 122, 0.5);
    position: absolute;
    z-index: 0;
  }
`;

const P = styled.p`
  margin: 0;
`;

class RoomPage extends Component {
  render() {
    const { data, globalData } = this.props;
    // console.log(data)
    return (
      <div>
        {ReportItems.map(items => (
          <div>{items.comp}</div>
        ))}
      </div>
    );
  }
}
export default sizeMe({ monitorHeight: true })(RoomPage);

const RoomPageHeader = ({ data }) => (
  <div>
    <P>{data.created_at}</P>
    <div>
      <h5>
        <strong>{data.content.title}</strong>
        <strong>Observations</strong>
      </h5>
      <P>
        {data.content.address.address1}
        {data.content.address.address2} <br />
        {data.content.address.city} {", "}
        {data.content.address.state} {data.content.address.zipcode}
      </P>
    </div>
  </div>
);

const RoomBar = ({ data }) => (
  <div>
    <P>
      Room: <strong>{data.room.label}</strong>
    </P>
  </div>
);

const ReportItems = ({ data }) => [
  {
    comp: <RoomBar data={data} />
  },
  {
    comp: <RoomBar data={data} />
  }
];

非常感谢任何帮助。我控制台了 ReportItems const，并返回了带有组件的对象数组。

Answer 1

就像我在评论中所说的那样。只需首先调用该函数，传递数据，以便您的组件获得该 Prop ，然后映射它。

render() {
  const { data, globalData } = this.props;
  const items = ReportItems({data})
  return (
    <div>
      { items.map(
          (items) => items.comp
        )
      }
      </div>
  );
}

Demo!

不太确定您的目标/方法是什么。如果您只想渲染一个组件几次，您可以直接执行此操作，而无需像这样将实例放入数组中。