Proptype类型组件的子元素不工作

Question

我试图用类型输入将proptype转换为一个特定的组件类，但这给了我一个警告。

警告：失败的道具类型：提供给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;

子系统上的控制台日志为：

$$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在接收一个或多个ReactInput时是一致的。

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

组件/非输入。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;

组件/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;

组件/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;

组件/Example.js（删除NonInput，保存，然后刷新页面以删除PropType警告-如果您希望它显示更明确的警告，请编写自定义验证器函数（底部的示例））

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>
);