Question

我将如何为可以包含一组不同对象形状的数组声明原型定义？例如

如果我有一个组件，例如EmailRenderer，它带有一个名为sections的道具，该道具是一个由不同对象组成的数组，每个对象都有唯一的类型及其相关属性。

const sections = [
    {
        type: "h1",
        copy: "Header!",
    },
    {
        type: "p1",
        copy: "lots of copy....",
    },
    {
        type: "image-main",
        src:
            "http://www.some-image.com",
        alt: "blah",
    },
    {
        type: "button",
        buttonType: "secondary",
        copy: "Watch now!",
        href: "#",
    },
    {
        type: "p1",
        copy: "more copy...",
    },
];

// ...

class EmailRenderer extends React.Component {
  // ...
}

//...

EmailRenderer.propTypes = {
  sections: PropTypes.arrayOf(
    // ???
  )
}

<EmailRenderer sections={sections} />

Answer 1

为每种“类型”声明类，我们称它们为TypographyElement（副本），MediaElement（src），ButtonElement（href）。

然后可以将sections道具声明为

sections : PropTypes.arrayOf(
  PropTypes.oneOf(
   [
      PropTypes.instanceOf(TypographyElement), 
      PropTypes.instanceOf(MediaElement), 
      PropTypes.instanceOf(ButtonElement), 
      ...
   ]
  )
);

React PropTypes：不同对象形状的数组

1 个答案: