## 一、Props属性 > state和props主要的区别在于props是不可变的，而state可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 ### 1.1 使用props ``` import React,{Component} from 'react' import ReactDOM from 'react-dom' // 通过this.props.name获取传入的属性 class App extends Component { render() { return <h1>{this.props.name}</h1> } } // 通过name=sophia 传入值 ReactDOM.render(<App name="sophia"/>,document.getElementById('root')) ``` ### 1.2 默认props > 你可以通过 getDefaultProps() 方法为 props 设置默认值，实例如下： 1. 常用写法 ``` # 声明组件 class App extends React.Component{ static defaultProps = { //默认属性一 name:'Mary' } } # 默认属性二 App.defaultProps={ name:'Mary' } ``` 2. 非ES6写法 ``` # 使用非ES6写法，需要引入create-react-class模块 import createReactClass from 'create-react-class' const Greeting = createReactClass({ getDefaultProps: function () { return { name:'小明' } }, render: function () { return <h1>这是非ES6写法的组件{this.props.name}</h1> } }) ``` ### 1.3 this.props.children > **this.props** 对象的属性与组件的属性一一对应，但是有一个例外，就是 **this.props.children** 属性。它表示组件的所有子节点 ``` class App extends Component { render() { return ( <div> <ol> {React.Children.map(this.props.children, function (child) { return <li>{child}</li>; })} </ol> </div> ) } } ReactDOM.render( <App> <h1>one</h1> <h1>two</h1> </App> ,document.getElementById('root')) ``` > 注意： - this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 *undefined* ;如果有一个子节点，数据类型是 *object*；如果有多个子节点，数据类型就是 *array* 。所以，处理 this.props.children 的时候要小心。 - - React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考[官方文档](https://reactjs.org/docs/react-api.html#react.children)。 ### 1.4 Props验证（PropTypes类型检查） > Props 验证使用 **propTypes**，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。 ``` import React,{Component} from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' class App extends Component { static propsTypes={ //设置props类型一 num:PropTypes.number } render() { return ( <div> {this.props.num+1} </div> ) } } //设置props类型二 App.propTypes = { num:PropTypes.number } ReactDOM.render(<App num={1}/>,document.getElementById('root')) ``` - 更多 PropTypes的验证类型参考[官方文档](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes) > 例二： 只允许一个子元素的验证 ``` import PropTypes from 'prop-types'; class MyComponent extends React.Component { render() { // This must be exactly one element or it will warn. const children = this.props.children; return ( <div> {children} </div> ); } } MyComponent.propTypes = { children: PropTypes.element.isRequired }; # <MyComponent></MyComponent>只能有一个子元素标签，否则报错 ```