How to use the react.PropTypes function in react

'use strict';
var React = require('react');


// Sentinel value to indicate no chromosome restriction
var ALL_CHROMOSOMES = null;

var PositionType = React.PropTypes.shape({
  start: React.PropTypes.oneOfType([
    React.PropTypes.number,
    React.PropTypes.instanceOf(null)
  ]),
  end: React.PropTypes.oneOfType([
    React.PropTypes.number,
    React.PropTypes.instanceOf(null)
  ]),
  chromosome: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.instanceOf(ALL_CHROMOSOMES)
  ])
}).isRequired;

module.exports = {
  PositionType,
  ALL_CHROMOSOMES
};

import isArray from 'lodash/isArray';
import deepEqual from 'deep-equal';
import locale from '../locale';
import MonthBody from './MonthBody';
import MonthTitle from './MonthTitle';
import formatter from '../formatter';
import util from '../util';

const prefixClass = Context.prefixClass;
const shadowArray = [1, 2]; // 只是用来提供一个长度的数组，本身的值没什么用
// const maxMonth = 5; // 最多渲染这么多个月

class Panel extends React.Component {

  static propTypes = {
    className: React.PropTypes.string,
    locale: React.PropTypes.string,
    height: React.PropTypes.number,
    value: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.array,
      React.PropTypes.object,
    ]),
    singleMode: React.PropTypes.bool, // 是否是单选模式
    onChange: React.PropTypes.func,
    showHalfDay: React.PropTypes.bool,
  };

  static defaultProps = {
    singleMode: true,
    onChange: () => {},

/* eslint-disable react/sort-comp */

const React = require("react");
const ReactDOM = require("react-dom");
const _ = require("underscore");
const TeX = require("react-components/tex.jsx");
const ApiClassNames = require("../perseus-api.jsx").ClassNames;
const ModifyTex = require("../tex-wrangler.js").modifyTex;

const MathOutput = React.createClass({
    propTypes: {
        value: React.PropTypes.oneOfType([
            React.PropTypes.string,
            React.PropTypes.number,
        ]),
        className: React.PropTypes.string,
        labelText: React.PropTypes.string,
        onFocus: React.PropTypes.func,
        onBlur: React.PropTypes.func,
    },

    getDefaultProps: function() {
        return {
            value: "",
            onFocus: function() {},
            onBlur: function() {},
        };
    },

    getInitialState: function() {
        return {
            focused: false,

import _ from 'lodash';
import React from 'react';
import FakeTerminal from './fake-terminal.jsx';
import SetupSkipStartup from './setup-skip-startup';
import Marked from '../marked/marked.jsx';
import commonReact from '../../services/common-react';

export default React.createClass({
  displayName: 'SetupPythonError',
  propTypes: {
    className: React.PropTypes.string,
    onCancel: React.PropTypes.func.isRequired,
    terminal: React.PropTypes.object.isRequired,
    text: React.PropTypes.object.isRequired
  },
  shouldComponentUpdate: function (nextProps) {
    return commonReact.shouldComponentUpdate(this, nextProps);
  },
  render: function () {
    const props = this.props,
      text = props.text,
      className = commonReact.getClassNameList(this);

    return (
      <div>
        <div>
          <div>{text.pythonError}</div>
          
          <button>{text.installAnaconda}</button>
          <button>{text.uniqueCommandForPython}</button></div></div>

import Styles from "./Option.less";

const {RichTextBox, CommentsTrigger} = quip.apps.ui;

const RETURN_KEY = 13;

const Checkmark = ({checked}) =&gt; <svg viewBox="0 0 18 18" height="18" width="18">
    <path d="M7.181,15.007a1,1,0,0,1-.793-0.391L3.222,10.5A1,1,0,1,1,4.808,9.274L7.132,12.3l6.044-8.86A1,1,0,1,1,14.83,4.569l-6.823,10a1,1,0,0,1-.8.437H7.181Z"></path>
</svg>;

Checkmark.propTypes = {
    checked: React.PropTypes.bool,
};

export default class Option extends React.Component {
    static propTypes = {
        color: React.PropTypes.string.isRequired,
        isLast: React.PropTypes.bool,
        multiple: React.PropTypes.bool,
        onDelete: React.PropTypes.func.isRequired,
        onSelect: React.PropTypes.func.isRequired,
        record: React.PropTypes.instanceOf(quip.apps.Record).isRequired,
        selected: React.PropTypes.bool,
        textRecord: React.PropTypes.instanceOf(quip.apps.RichTextRecord)
            .isRequired,
        totalVotes: React.PropTypes.number,
        votesCount: React.PropTypes.number,
    };

import React from "react";
import { ListGroupItem } from "virtool/js/components/Base";

/**
 * A component based on ListGroupItem
 */
const UserEntry = (props) => (
     props.onClick(props._id)}>
        {props._id}
    
);

UserEntry.propTypes = {
    _id: React.PropTypes.string.isRequired,
    active: React.PropTypes.bool,
    onClick: React.PropTypes.func.isRequired
};

UserEntry.defaultProps = {
    active: false
};

export default UserEntry;

})}
            
        
    },
    propTypes: {
        eventGroups: React.PropTypes.arrayOf(React.PropTypes.arrayOf(React.PropTypes.shape(TaskEvent.PropTypes))).isRequired,
        loggedInUserGuid: React.PropTypes.string,
        recipient: React.PropTypes.object,
        setTransitionFinished: React.PropTypes.func.isRequired,
        setTaskDetails: React.PropTypes.object.isRequired
    },
    getKey:function(events){
        return events.reduce((memo, event)=> '' + memo + event.localEventId, 'group-');
    },
    getGroups: function() {
        return getEventGroupsInOrder(this.props.eventGroups);
    }
});

this.props.onChange(e);
    }

    render() {
        return (
            <select value="{this.props.value}">
                <option value="nil">Select...</option>
                {this.props.legacyRoles.map(role =&gt;
                    <option value="{role.name}">{role.name}</option>
                )}
            </select>
        );
    }
}
LegacyRoleSelector.propTypes = {
    legacyRoles: React.PropTypes.array.isRequired,
    value: React.PropTypes.string.isRequired,
    onChange: React.PropTypes.func.isRequired,
};
LegacyRoleSelector = connect(({legacyRoles}) =&gt; ({legacyRoles}))(LegacyRoleSelector);


class LegacyRole extends PureComponent {
    render() {
        return (
            <span>
                {this.props.unknown &amp;&amp;
                
                    <p>
                        {t("unknown_legacy_role")} <span style="{{fontStyle:">{this.props.name}</span>
                    </p>
                    <p></p></span>

let { width, height, children, defaultValue, style, styleOption, styleText } = this.props;
    let dimensions = { width, height };

    return (
      
        
      
    );
  }
}

Select.propTypes = {
  width: React.PropTypes.number,
  height: React.PropTypes.number,
  optionListRef: React.PropTypes.func.isRequired,
  onSelect: React.PropTypes.func
};

Select.defaultProps = {
  onSelect: () => { }
};

module.exports = Select;

import React from 'react'
import Itemable from './itemable'

import {prettyTime, c, i18n} from './utils'

export class CenteredMenu extends React.Component {
    static propTypes = {
        title: React.PropTypes.string,
        ulClassName: React.PropTypes.string
    }

    shouldComponentUpdate(newProps, newState) {
        return this.props.items === newProps.items
    }

    render() {
        return (
            <div>
                <div></div>
                <div>{this.props.title}</div>
                <ul>
                    {/*this.props.items.map((item, i) =&gt; {
                         return <li>{item}</li>
                     })*/}
                </ul></div>