使用原型时渲染没有返回任何内容

Question

class ContentLoader extends Component {

state = {
    animation: new Animated.Value(0)
}


render() {
    if (this.props.loading) {
        return (<View
            style={{
                height: 100,
                width: 100
            }}
        />);
    }
    return this.props.children;

}
}


ContentLoader.prototype = {
    primaryColor: PropTypes.string,
    secondaryColor: PropTypes.string,
    animationDuration: PropTypes.number,
    // children: PropTypes.element.isRequired,
    style: PropTypes.object.isRequired,
    loading: PropTypes.bool,

}
ContentLoader.defaultProps = {
    primaryColor: 'rgba(195, 191, 191, 1)',
    secondaryColor: 'rgba(218, 215, 215, 1)',
    animationDuration: 500,
    loading: true
};

export default ContentLoader;

When i use this in my component, I get Nothing was returned from render? but when i comment this part

 ContentLoader.prototype = {
    primaryColor: PropTypes.string,
    secondaryColor: PropTypes.string,
    animationDuration: PropTypes.number,
    // children: PropTypes.element.isRequired,
    style: PropTypes.object.isRequired,
    loading: PropTypes.bool,
}

Everything works? Any help? Everthing works well without prop types, Or maybe I am doing something wrong.

Answer 1

ContentLoader.propTypes instead of ContentLoader.prototype

prototype is used for adding methods to a object and isn't related to type checking.

here is a working example: https://stackblitz.com/edit/react-ww1xyk

https://reactjs.org/docs/typechecking-with-proptypes.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype