Question

我有一个文件，它可以容纳多个类组件。在这个例子中，我有一个使用两个无状态组件的类组件，我想在类组件中使用它。如何验证不同组件的道具。

const Image = ({className, img}) => {
<code>
}

const MessageDetail = ({className, message}) => {
<code>
}


class Container extends Component {
  constructor(props) {
    super(props);

    this.state = {
      expandall: true,
      touched: null,
    };

<code>
<Image className='block-image' img='component1' />
<MessageDetail className='block-image' message='component2' />

Container.propTypes = {
  model: PropTypes.object,
  content: PropTypes.object,
  emit: PropTypes.func,
  screensize: PropTypes.string,
};

Container.defaultProps = {
  model: null,
  content: null,
  emit: null,
  screensize: 'desktop',
};

Answer 1

您只需将其添加到文件的末尾，例如：

MessageDetail.propTypes = {
    className: PropTypes.object,
    message: PropTypes.object
};

Image.propTypes = {
    className:PropTypes.object,
    img: PropTypes.object
};

确实没有什么特别的要求。

Answer 2

您可以这样编码： -

const Image = ({className, img}) => {
<code>
}

const MessageDetail = ({className, message}) => {
<code>
}


class Container extends Component {
  constructor(props) {
    super(props);

    this.state = {
      expandall: true,
      touched: null,
    };

<code>
<Image className='block-image' img='component1' />
<MessageDetail className='block-image' message='component2' />

Container.propTypes = {
  model: react.PropTypes.object,
  content: react.PropTypes.object,
  emit: react.PropTypes.func,
  screensize: react.PropTypes.string,
};

Container.defaultProps = {
  model: null,
  content: null,
  emit: null,
  screensize: 'desktop',
};

Image.propTypes = {
  propA: react.PropTypes.object,
  propB: react.PropTypes.object,
};

MessageDetail.propTypes = {
  propC: react.PropTypes.object,
  propD: react.PropTypes.object,
};

单个文件中多个反应组件的PropType验证

2 个答案: