props

理解 & 作用

理解：

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中

作用：

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意: 组件内部不要修改props数据 ```javascript class Person extends React.Component{ render(){

    // console.log(this);
    const {name,age,sex} = this.props
    return (
        <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age+1}</li>
        </ul>
    )

   } }

//方式一 ReactDOM.render(,document.getElementById(‘test1’)) //方式二 扩展属性: 将对象的所有属性通过props传递 const p = {name:’老刘’,age:18,sex:’女’} ReactDOM.render(,document.getElementById(‘test1’))

<a name="lGRJ9"></a>
### 数据: 父->子
```jsx
// 父组件
class Parent extends React.Component {
  state = {
    lastName: '王'
  }

  render() {
    return (
      <div className="parent">
        父组件：
        <Child name={this.state.lastName} />
      </div>
    )
  }
}

// 子组件
const Child = props => {
  console.log('子组件：', props)

  return (
    <div className="child">
      <p>子组件，接收到父组件的数据：{props.name}</p>
    </div>
  )
}

//类组件中
render(){
  const {name} = this.props
}

数据: 子>父

// 父组件
class Parent extends React.Component {
  state = {
    parentMsg: ''
  }

  // 提供回调函数，用来接收数据
  getChildMsg = data => {
    console.log('接收到子组件中传递过来的数据：', data)

    this.setState({
      parentMsg: data
    })
  }

  render() {
    return (
      <div className="parent">
        父组件：{this.state.parentMsg}
        <Child getMsg={this.getChildMsg} />
      </div>
    )
  }
}

// 子组件
class Child extends React.Component {
  state = {
    msg: '刷抖音'
  }

  handleClick = () => {
    // 子组件调用父组件中传递过来的回调函数
    this.props.getMsg(this.state.msg)
  }

  render() {
    return (
      <div className="child">
        子组件：{' '}
        <button onClick={this.handleClick}>点我，给父组件传递数据</button>
      </div>
    )
  }
}

类型限制(类型、必传、默认值)

npm install prop-types

注意：

1. Person.propTypes中propTypes 首字母小写，react认准这个关键字
2. name: React.PropTypes.中 PropTypes首字母大写
3. 组件名.propTypes = {}

   class Person

第一种方式（React v15.5 开始已弃用）：
原本PropTypes放在react中,但体积太大后移除到prop-types库(方式二)

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

案例代码

//对标签属性进行类型、必要性的限制
Person.propTypes = {
    name:PropTypes.string.isRequired, //限制name必传，且为字符串
    sex:PropTypes.string,//限制sex为字符串
    age:PropTypes.number,//限制age为数值
    speak:PropTypes.func,//限制speak为函数
}
//指定默认标签属性值
Person.defaultProps = {
    sex:'男',//sex默认值为男
    age:18 //age默认值为18
}

简写形式

写到类中，并用static关键字定义为静态属性，不给实例对象调用

class Person extends React.Component{

    //对标签属性进行类型、必要性的限制
    static propTypes = {
        name:PropTypes.string.isRequired, //限制name必传，且为字符串
    }

    //指定默认标签属性值
    static defaultProps = {
        sex:'男',//sex默认值为男
    }
}

类中构造函数props是否使用？

constructor(props){
    //构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
    super(props)
    console.log('constructor',this.props);
}

函数组件的props

//创建组件
function Person (props){
    const {name,age,sex} = props
    return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age}</li>
            </ul>
        )
}
Person.propTypes = {
    name:PropTypes.string.isRequired, //限制name必传，且为字符串
    sex:PropTypes.string,//限制sex为字符串
    age:PropTypes.number,//限制age为数值
}

//指定默认标签属性值
Person.defaultProps = {
    sex:'男',//sex默认值为男
    age:18 //age默认值为18
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))

children(插槽)

1. 文本可以作为<NavLink>链接名
2. 组件可以跟插槽一样