简体   繁体   中英

PropType validations for multiple react components in a single file

I have a file which accommodates more than a single class component. In this example, I have a class component that used two stateless components and I would like to use it in a class component. How can I validate the props for different components.

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',
};

You just add it at the end of the file eg:

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

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

Nothing special is really required.

You can code like this:-

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,
};

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM