簡単Reactのタイプ検出-PropTypes

9601 ワード

アプリケーションが大きくなるにつれて、コンポーネントの正確な使用がますます重要になります.このためにReact.propTypesを導入すると、多くのベリファイアが着信データの有効性を検証するために提供されます.プロpsに無効データが入ると、JavaScriptコンソールは警告を投げます.
注意性能を考慮して開発環境のみでプロpTypesを検証します.
一、propsは指定されたjs基本タイプであると宣言して、伝えてもいいですか?
1、React.PropTypes.array
正しいモデル:

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.array.isRequired    
    },    
    render: function() {    
        return (    
            {this.props.name}    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

2、React.PropTypes.book
正しいモデル:

var MyBox = React.createClass({    
    propTypes: {    
        student: React.PropTypes.bool.isRequired    
    },    
    render: function() {  
        return (    
            {this.props.student ? "Hello, react!" : "Sorry!"}    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

注意:{this.props.student}trueを含むdivをレンダリングできませんか?
3、React.PropTypes.func
正しいモデル:

var MyBox = React.createClass({    
    propTypes: {    
        sayHello: React.PropTypes.func.isRequired    
    },    
    render: function() {  
        this.props.sayHello();  
        return (    
            Hello, react!    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

4、React.PropTypes.number
正しいモデル:

var MyBox = React.createClass({    
    propTypes: {    
        age: React.PropTypes.number.isRequired    
    },    
    render: function() {  
        return (    
            {this.props.age}    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

5、React.PropTypes.object
正しいモデル:

var MyBox = React.createClass({    
    propTypes: {    
        family: React.PropTypes.object.isRequired    
    },    
    render: function() {  
        return (    
            {this.props.family.mother} & {this.props.family.father}    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

6、React.PropTypes.string
正しいモデル:

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.string.isRequired    
    },    
    render: function() {  
        return (    
            {this.props.name}    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

7、React.PropTypes.smbol

var MyBox = React.createClass({      
    propTypes: {      
        name: React.PropTypes.symbol.isRequired      
    },      
    render: function() {  
        var obj = {  
            [this.props.name]: "Alice"  
        }  
        return (      
            {obj[this.props.name]}      
        );      
    }      
});      
ReactDOM.render(      
    ,      
    document.getElementById('timeBox')      
);

二、propsをデジタル、文字列、DOM要素として宣言するか、またはこれらのタイプの配列またはfragmentを含む.
React.PropTypes.node
正しいモデル:

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.node.isRequired    
    },    
    render: function() {  
        return (    
            {this.props.children}    
        );    
    }    
});    
ReactDOM.render(    
      
        [Hello, react!, 30, "Alice"]  
    ,    
    document.getElementById('timeBox')    
);

エラーのモデル:

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.node.isRequired    
    },    
    render: function() {  
        return (    
            {this.props.children}    
        );    
    }    
});    
ReactDOM.render(    
      
        {true}  
    ,    
    document.getElementById('timeBox')    
);

三、propsはReact元素(原生HTML元素またはReact類)であると宣言する.
React.PropTypes.element
正しいモデル:

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.element.isRequired    
    },    
    render: function() {  
        return (    
            {this.props.children}    
        );    
    }    
});    
var Children = React.createClass({    
    render: function() {  
        return (    
            Hello    
        );    
    }    
});    
ReactDOM.render(    
      
          
              
             React  
          
    ,    
    document.getElementById('timeBox')    
);

エラーのモデル:

var MyBox = React.createClass({    
    propTypes: {    
        children: React.PropTypes.element.isRequired    
    },    
    render: function() {  
        return (    
            {this.props.children}    
        );    
    }    
});    
var Children = React.createClass({    
    render: function() {  
        return (    
            Hello    
        );    
    }    
});    
ReactDOM.render(    
      
          
         React  
    ,    
    document.getElementById('timeBox')    
);

四、propsは特定のクラスであると宣言する.
React.PropTypes.instance Of(MyBox)

var MyBox = React.createClass({      
    propTypes: {      
        children: React.PropTypes.instanceOf(Array)     
    },      
    render: function() {  
        return (      
            {this.props.children}      
        );      
    }      
});        
ReactDOM.render(      
      
        {[1, 2, 3]}  
    ,      
    document.getElementById('timeBox')      
);

注意:指定されたクラスはカスタムのReact類ではありません.
五、propsは特定の指定値の一つであると宣言する(enumの方式で)
React.PropTypes.oneOf(''Alice'、'Bruce')
エラーのモデル:

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.oneOf(['Alice', 'Bruce'])    
    },    
    render: function() {  
        return (    
            {this.props.name}    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

六、propsはいくつかのタイプの一つであると宣言する.
React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number])
エラーのモデル:

var MyBox = React.createClass({    
    propTypes: {    
        prop: React.PropTypes.oneOfType([  
            React.PropTypes.string,  
            React.PropTypes.number  
        ])   
    },    
    render: function() {  
        return (    
            {this.props.prop}    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

七、プロpsが指定されたタイプの配列であると宣言する.
React.PropTypes.arrayOf(React.PropTypes.number)
エラーのモデル:

var MyBox = React.createClass({    
    propTypes: {    
        prop: React.PropTypes.arrayOf(React.PropTypes.number)  
    },  
    render: function() {  
        return (    
            {this.props.prop}    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

八、プロpsが指定タイプの属性構成の対象であると宣言する.
React.PropTypes.object Of(React.PropTypes.number)
エラーのモデル:

var MyBox = React.createClass({    
    propTypes: {    
        family: React.PropTypes.objectOf(React.PropTypes.string)    
    },    
    render: function() {  
        return (    
            {this.props.family.mother} & {this.props.family.father}    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

九、propsが特定の形状パラメータの対象であることを宣言する.

React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
})

十、propsが必要なあるタイプであると宣言する.
React.PropTypes.*.isrequired
エラーのモデル:

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.string.isRequired    
    },    
    render: function() {  
        return (    
            Hello, react!    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

十一、propsが必要な任意のタイプであると宣言する.
React.PropTypes.any.isrequired
エラーのモデル:

var MyBox = React.createClass({    
    propTypes: {    
        name: React.PropTypes.any.isRequired    
    },    
    render: function() {  
        return (    
            Hello, react!    
        );    
    }    
});    
ReactDOM.render(    
    ,    
    document.getElementById('timeBox')    
);

参考:http://blog.csdn.net/zhouziyu2011/article/details/70842310

JSON:私は銃を二丁持っています.一つはstingifyといいます.もう一つはパーといいます.