Demo!

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常量，然后获得了带有组件的对象数组。

Answer 1

就像我在评论中说的那样。只需先调用该函数，将数据传递通过，以便您的组件获得该道具，然后在其上进行映射。

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

Demo!

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

Answer 2

只需通过以下方式进行更改：

{ReportItems().map(items => <div>{items.comp}</div>)}
//----------^^

最后也要摆脱;。

反应组件数组未映射

2 个答案:

Demo!