Question

我正在尝试使用Input类型将特定的组件类原型化，但它给了我警告。

警告：道具类型失败：提供给的道具children无效 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在接收一个或多个React Input时保持一致。

工作示例：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子代不起作用

1 个答案: