如何最好地定义propType以接受组件作为道具?

时间:2015-10-12 17:41:56

标签: reactjs

鉴于这个人为的例子,componentType的最佳定义是什么?

const componentType = PropTypes.oneOfType([
    PropTypes.shape({render: PropTypes.func.isRequired}), // React.createClass / React.Component ...better way to describe?
    PropTypes.func,                                       // Stateless function
    // others?
]);

const Selector = React.createClass({

    propTypes: {
        components: PropTypes.arrayOf(componentType).isRequired,
        index:      PropTypes.number.isRequired,
    },

    render() {
        const Component = this.props.components[this.props.index];
        return (
            <Component />
        );
    }
});

PropTypes.node我不是在寻找;它的用法如下:

<Selector components={[<ThingA  />, <ThingB  />]} />

虽然我想要的东西看起来像:

<Selector components={[ThingA, ThingB]} />

我想传递类型,而不是实例。

4 个答案:

答案 0 :(得分:8)

我转发到github并得到this answer。所以它应该是:

const componentType = PropTypes.oneOfType([PropTypes.string, PropTypes.func])

func涵盖“经典”反应组件,ES6类和无状态功能组件的类型。 string涵盖原生元素案例(例如“div”)。

答案 1 :(得分:0)

这是react-router处理here的方式:

import React from "react";
import { isValidElementType } from "react-is";

Route.propTypes = {
    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
    component: (props, propName) => {
      if (props[propName] && !isValidElementType(props[propName])) {
        return new Error(
          `Invalid prop 'component' supplied to 'Route': the prop is not a valid React component`
        );
      }
    },
    exact: PropTypes.bool,
    location: PropTypes.object,
    path: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.arrayOf(PropTypes.string)
    ]),
    render: PropTypes.func,
    sensitive: PropTypes.bool,
    strict: PropTypes.bool
  };

答案 2 :(得分:0)

这似乎是最新的:https://stackoverflow.com/a/55784547/4993912

TLDR;

const propTypes = {
    component: PropTypes.elementType,
    requiredComponent: PropTypes.elementType.isRequired,
};

答案 3 :(得分:-1)

您正在寻找arrayOfelement的组合。 propTypes列表可以在文档的Reusable Components页面上找到。

我希望它看起来像这样:

components: React.PropTypes.arrayOf(React.PropTypes.element)