React Props

2020-04-16

state和props主要得区别在于props是不可变得，而state可以根据与用户交互来改变。这就是为什么有些容器组件需要定义state来更新和修改数据，而子组件只能通过props来传递数据。

使用props

以下实例演示了如何在组件中使用props;

function HelloMessage(props){
    return <h1>Hello{props.name}!</h1>;
}
const element = <HelloMessage name="Runoob" />;

ReachtDOM.render(
    element,
    document.getElementById('example')
);

实例中name属性通过props.name来获取

默认Props

你可以通过组件类得defaultProps属性为props设置默认值，示例如下：

class HelloMessage extends React.Component{
    render(){
        return (
            <h1>Hello,{this.props.name}</h1>
        );
    }
}
HelloMessage.defaultProps={
    name:'Runoob'
};
const element = <HelloMessage />;

ReactDOM.render(
    element,
    document.getElementById('example')
);

State和Props

以下实例演示了如何在应用中组合使用state和props.我们可以在父组件中设置state,并且通过在子组件上使用props将其传递到子组件上。在render函数中，
我们设置name和site来获取父组件传递过来的数据。

class WebSite extends React.Component{
    constructor(){
        super();

        this.state={
            name: "菜鸟教程"
            site: "https://www.runoob.com"
        }
    }
    render(){
        return (
            <div>
                <Name name={this.state.name} />
                <Link site={this.state.site} />
            </div>
        );
    }
}

class Name extends React.Component{
    render(){
        return (
            <h1>{this.props.name}</h1>
        );
    }
}

class Link extends React.Component{
    render(){
        return(
            <a href={this.props.site}>
                {this.props.site}
            </a>
        ); 
    }
}

ReactDOM.render(
    <WebSite />,
    document.getElementById('example')
);

Props验证

React.ProTypes在React v15.5版本后已经移到了prop-types库。

1	<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

Props验证使用propTypes,它可以保证我们得应用组件被正确使用,React.PropTypes提供很多验证器来验证传入数据是否有效。当向props传入无效数据时，javaScript控制台会抛出警告。以下实例创建一个Mytitle组件，属性title是必须的且是字符串，非字符串类型会自动转换为字符串：
React 16.4实例

var title="菜鸟教程";
//var title=123;
class MyTitle extends React.Component{
    render(){
        return(
            <h1>Hello,{this.props.title}</h1>
        );
    }
}

MyTitle.propTypes={
    title: PropTypes.string
};
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

React 15.4实例

var title="菜鸟教程";
//var title=123;
var MyTitle = React.createClass({
    propTypes:{
        title: React.PropTypes.string.isRequired,
    },

    render: function(){
        return <h1>{this.props.title}</h1>
    }
});
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

更多验证器说明如下：

MyComponent.propTypes={
    //可以声明prop为指定的JS基本数据类型，默认情况，这些数据是可选的
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string

    //可以被渲染的对象 numbers,strings,elements或者array
    optionalNode: React.PropTypes.node,
    //React元素
    optionalElement: React.PropTypes.element,
    //用JS的instanceof操作符声明
    optionalMessage: React.PropTypes.instanceOf(Message),
    //用enum来限制prop只接受指定的值
    optionalEnum: React.PropTypes.oneOf(['News','Photos']),
    //可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
        React.PropTypes.insanceOf(Message)
    ]),
    //指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.ProTypes.number),

    //指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    //特定shape参数的对象
    optionalObjectWithShape: React.RropTypes.shape({
        color: React.PropTypes.string,
        funtSize：React.PropTypes.number
    }),

    //任意类型加上'isRequired'来使prop不可空。
    requiredFunc: React.PropTypes.func.isRwquired,

    //不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    //自定义验证器。如果验证失败需要返回一个Error对象。不要直接使用`console.warn`或抛异常，因此这样`oneOfType`会失效。
    customProp: function(props,propName,componentName){
        if(!/matchme/.test(props[propName])){
            return new Error('Validation failed!');
        }
    }
}