如何使用道具为React Component动态构建对象？

debugcn 发表于 Dev

学徒

我将组件粘贴到下面，该组件输出6个项目的网格。这6个项目当前被硬编码为gridItems。

我想了解如何使该组件动态化。我可以通过道具告诉组件要渲染的项目（设计师，经理等）。

当前，该组件将输出6个项目。我该怎么做呢？

<RoleCardGrid designer manager />

仅使用2个项目渲染组件。

范例2：

<RoleCardGrid designer manager doctor sales />

仅使用4个项目渲染组件。

感谢您的帮助。

这是我当前的组件：

import React from 'react';
import RoleCard from 'components/RoleCard';

let gridItems = [
  { roleTitle: "designer",
    linkTo: "example.com",
    description: "Desc goes here",
  },
  { roleTitle: "manager",
    linkTo: "example.com",
    description: "Desc goes here",
  },
  { roleTitle:"freelancer",
    linkTo: "example.com",
    description: "Desc goes here",
  },
  { roleTitle:"engineer",
    linkTo: "example.com",
    description: "Desc goes here",
  },
  { roleTitle:"doctor",
    linkTo: "example.com",
    description: "Desc goes here",
  },
  { roleTitle:"sales",
    linkTo: "example.com",
    description: "Desc goes here",
  }
];

function renderGridItems(items) {
  let rendered = items.map((item, index) => {
    return (<div key={`gridItem-${index}`}>
      <RoleCard
        key={`roleGridItem-${index}`}
        roleTitle={item.roleTitle}
        linkTo={item.linkTo}
        description={item.description}
      />
    </div>);
  });
  return rendered;
}

const RoleCardGrid = () => (
  <Grid
    maxColumns={[1, 2, 2]}
    gridGap={[40, 40, 40]}
    maxWidth={[null, 760, 760]}
    rcLabel="rolePages"
  >
    {renderGridItems(gridItems)}
  </Grid>
);


export default RoleCardGrid;

马丁

您可以为每个角色引入标志属性，也可以为每个角色公开专用的RoleCard组件。标记看起来会有所不同。我将快速介绍两种解决方案：

标记属性

// each role can only be shown once
// fixed order of roles

//usage
<RoleCardGrid designer manager doctor sales />

//metadata
const gridItems = {
  designer: { roleTitle: "designer", linkTo: "example.com", reasoning:"Desc goes here" },
  doctor: { roleTitle: "doctor", linkTo: "example.com", reasoning:"Desc goes here" },
  // etc... add all roles here ...
};

//component
const RoleCardGrid = ({designer, manager, doctor, sales, freelancer, engineer}) => {

  return (
    <Grid
      maxColumns={[1, 2, 2]}
      gridGap={[40, 40, 40]}
      maxWidth={[null, 760, 760]}
      rcLabel="rolePages"
    >
      {designer && <RoleCard {...gridItems.designer} />}
      {manager && <RoleCard {...gridItems.manager} />}
      {doctor && <RoleCard {...gridItems.doctor} />}
      {sales && <RoleCard {...gridItems.sales} />}
      {freelancer && <RoleCard {...gridItems.freelancer} />}
      {engineer && <RoleCard {...gridItems.engineer} />}
    </Grid>
  );
};

专业的RoleCard组件

// each role can occur more than once
// order of roles can be varied

//usage
<RoleCardGrid>
  <RoleCardGrid.Designer />
  <RoleCardGrid.Manager />
  <RoleCardGrid.Doctor />
  <RoleCardGrid.Sales />
<RoleCardGrid>

//metadata
const gridItems = {
  designer: { roleTitle: "designer", linkTo: "example.com", reasoning:"Desc goes here" },
  doctor: { roleTitle: "doctor", linkTo: "example.com", reasoning:"Desc goes here" },
  // etc... add all roles here ...
};

//component
const RoleCardGrid = ({ children }) => {

  return (
    <Grid
      maxColumns={[1, 2, 2]}
      gridGap={[40, 40, 40]}
      maxWidth={[null, 760, 760]}
      rcLabel="rolePages"
    >
      {children}
    </Grid>
  );
};

RoleCardGrid.Designer = () => (<RoleCard {...gridItems.designer} />);
RoleCardGrid.Manager = () => (<RoleCard {...gridItems.manager} />);
RoleCardGrid.Doctor= () => (<RoleCard {...gridItems.doctor} />);
RoleCardGrid.Sales = () => (<RoleCard {...gridItems.sales} />);
RoleCardGrid.Freelancer = () => (<RoleCard {...gridItems.freelancer} />);
RoleCardGrid.Engineer = () => (<RoleCard {...gridItems.engineer} />);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。