// 这个键值对可以是字符串：
<Hello name="winty"/>// 可以是大括号：大括号包裹的求值表达式
<Hello name={123}/>
<Hello name={"king"}/>// 可以是一个数组：这样属性拿到的也是一个数组
<Hello name={[1,2,3]}/>   传入数组// 可传入变量：变量可以在外部定义，在组件内去引用 变量的值可为任何类型
<Hello name={winty}/>   变量

class HelloMessage extends React.Component{render() {return <h1>Hello {this.props.name}</h1>;}
}
ReactDOM.render(<HelloMessage name="John" />, document.getElementById('example')  );

var attr={ one:"11", two:"22" }

//方式1：
class Test extends React.Component{static defaultProps = {name:'everyone'}constructor(props){super(props);}render(){return (<div>{this.props.name}</div>);
    }
}//方式2：
class Test extends React.Component{constructor(props){super(props);}render(){return (<div>{this.props.name}</div>);
    }
}
Test.defaultProps = {name:'everyone'
}

npm install prop-types

import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm

# 写法一：
class Test extends React.Component{static defaultProps = {name:'everyone'}constructor(props){super(props);}render(){return (<div>{this.props.name}</div>);
    }
}
Test.propTypes = {name:PropTypes.string
}<Test name="'houningzhou'" />
# 写法二：
class Test extends React.Component{static defaultProps = {name:'everyone'}static propTypes = {name:PropTypes.string}constructor(props){super(props);}render(){return (<div>{this.props.name}</div>);
    }
}<Test name="'houningzhou'" />
React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。官方定义的验证器如下，不是使用ES6语法。MyComponent.propTypes = {// 可以声明 prop 为指定的 JS 基本类型。默认情况下，这些 prop 都是可传可不传的。
    optionalArray: PropTypes.array,optionalBool: PropTypes.bool,optionalFunc: PropTypes.func,optionalNumber: PropTypes.number,optionalObject: PropTypes.object,optionalString: PropTypes.string,optionalSymbol: PropTypes.symbol,// 所有可以被渲染的对象：数字，字符串，DOM 元素或包含这些类型的数组(or fragment) 。
    optionalNode: PropTypes.node,// React 元素
    optionalElement: PropTypes.element,// 你同样可以断言一个 prop 是一个类的实例。 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: PropTypes.instanceOf(Message),// 你可以用 enum 的方式 确保你的 prop 被限定为指定值。optionalEnum: PropTypes.oneOf(['News', 'Photos']),// 指定的多个对象类型中的一个
    optionalUnion: PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)]),// 指定类型组成的数组
    optionalArrayOf: PropTypes.arrayOf(React.PropTypes.number),// 指定类型的属性构成的对象
    optionalObjectOf: PropTypes.objectOf(React.PropTypes.number),// 特定形状参数的对象
    optionalObjectWithShape: PropTypes.shape({color: PropTypes.string,fontSize: PropTypes.number}),// 你可以在任意东西后面加上 `isRequired` 来确保 如果 prop 没有提供 就会显示一个警告。
    requiredFunc: PropTypes.func.isRequired,// 不可空的任意类型
    requiredAny: PropTypes.any.isRequired,// 你可以自定义一个验证器。如果验证失败需要返回一个 Error 对象。// 不要直接使用 `console.warn` 或抛异常，// 因为这在 `oneOfType` 里不起作用。customProp: function(props, propName, componentName) {if (!/matchme/.test(props[propName])) {return new Error('Validation failed!');}}
};

class Test extends React.Component{constructor(props){super(props);//默认状态this.state = {isShow:true}}render(){return <div style={display:this.state.isShow?'block':'none'}>This is component!</div>
    }
}

class Timer extends React.Component{constructor(props){super(props);this.state = {sec: 1}}add(){this.setState({sec:this.state.sec+1});},componentDidMount(){setInterval(this.add,1000);},render(){return ( <div style={this.style}>过去了:{this.state.sec}秒钟</div>);
    }
}
ReactDOM.render(<Timer/>,document.getElementById('demo'));