类型组件的 Proptypes children 不工作

Question

我正在尝试使用类型输入来支持特定组件 class，但它给了我一个警告。

Warning: Failed prop type: Invalid prop children supplied to MyComponent.

MyComponent.js

    import React, { Component, cloneElement } from 'react';
    import Input from '../Input';

    class MyComponent extends Component {
      static propTypes = {
        children: PropTypes.oneOfType([
          PropTypes.shape({
            type: PropTypes.oneOf([Input]),
          }),
          PropTypes.arrayOf(
            PropTypes.shape({
              type: PropTypes.oneOf([Input]),
            })
          ),
        ]).isRequired,
      }

      renderChildren(child) {
        const clone = cloneElement(child, {newProp: 'blaaa'});
        return <div className='inner'>{clone}</div>;
      }

      render() {
        const { children } = this.props;
        return (
          <div>
            {React.Children.map(children, this.renderChildren)}
          </div>
        );
      }
    }

export default MyComponent;

我的输入组件被精简了。

import React, { Fragment } from 'react';

const Input = ({name}) => (
    <Fragment>
      <input
      />
    </Fragment>
);

export default Input;

children 上的控制台日志是：

$$typeof: Symbol(react.element)
key: null
props: {id: "email", placeholder: "email", type: "tel", name: "Email", styles: Array(1), …}
ref: null
type: ƒ Input(_ref)
_owner: FiberNode {tag: 1, key: "inputname", type: ƒ, stateNode: null, return: FiberNode, …}
_self: null
__proto__: Object

Answer 1

这假设您的 MyComponent 将始终如一地接收一个或多个 React Inputs。

工作示例：https://codesandbox.io/s/045kw2pq30

component/NonInput.js

import React, { Fragment } from "react";
import PropTypes from "prop-types";

const NonInput = props => (
  <code>
    <pre>{JSON.stringify(props, null, 4)}</pre>
  </code>
);

NonInput.propTypes = {
  props: PropTypes.objectOf(PropTypes.string)
};

export default NonInput;

components/Input.js

import React, { Fragment } from "react";
import PropTypes from "prop-types";

const Input = ({ newProp, ...props }) => (
  <Fragment>
    {console.log(newProp)}
    <input className="uk-input" {...props} />
  </Fragment>
);

Input.propTypes = {
  newProp: PropTypes.string,
  props: PropTypes.objectOf(PropTypes.string)
};

export default Input;

components/MyComponent.js

import React, { PureComponent, cloneElement } from "react";
import PropTypes from "prop-types";
import Input from "./Input";

const shapeOfChildren = PropTypes.shape({
  type: PropTypes.oneOf([Input]).isRequired,
  props: PropTypes.shape({
    name: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    placeholder: PropTypes.string.isRequired
  }).isRequired
});

class MyComponent extends PureComponent {
  renderChildren = child => (
    <div className="inner">{cloneElement(child, { newProp: "blaaa" })}</div>
  );

  render = () => (
    <div className="uk-form-large">
      {React.Children.map(this.props.children, this.renderChildren)}
    </div>
  );
}

MyComponent.propTypes = {
  children: PropTypes.oneOfType([
    shapeOfChildren,
    PropTypes.arrayOf(shapeOfChildren)
  ]).isRequired
};

export default MyComponent;

components/Example.js（去掉NonInput，保存，然后刷新页面去掉PropType警告——如果你想让它显示一个更明确的警告，然后写一个 custom validator function (example toward the bottom))

import React from "react";
import MyComponent from "./MyComponent";
import Input from "./Input";
import NonInput from "./NonInput";

export default () => (
  <MyComponent>
    <Input name="firstName" type="text" placeholder="First Name" />
    <Input name="lastName" type="text" placeholder="Last Name" />
    <NonInput name="lastName" type="text" placeholder="Last Name" />
  </MyComponent>
);

类型组件的 Proptypes children 不工作

Proptypes children of type component not working

reactjs

react-proptypes