组件的props

组件是封闭的，要接收外部数据应该通过props来实现

props的作用：接收传递给组件的数据

传递数据：给组件标签添加属性

接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  props
*/

// 2 接收数据
class Hello extends React.Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <h1>props: {this.props.age}</h1>
      </div>
    )
  }
}

// 1 传递数据
ReactDOM.render(<Hello name="rose" age={19} />, document.getElementById('root'))

// // 2 接收数据
// const Hello = (props) => {
//   // props是一个对象
//   console.log(props)
//   return (
//     <div>
//       <h1>props: {props.name}</h1>
//     </div>
//   )
// }

// // 1 传递数据
// ReactDOM.render(<Hello name="jack" age={19} />, document.getElementById('root'))

特点

1.可以给组件传递任意类型的数据

　　name="rose"　　字符串

　　age={19}　　整形

　　colors={['red', 'green', 'blue']}　　数组

　　fn={() => console.log('这是一个函数')}　　函数

　　tag={<p>这是一个p标签</p>}　　JSX

2.props是只读的对象，只能读取属性的值，无法修改对象

3.注意：使用类组件时，如果写了构造函数，应该将props传递给super()，否则，无法在构造函数中获取到props！

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  props
*/

// 2 接收数据
class Hello extends React.Component {
  //推荐使用props作为constructor的参数！！！
  constructor(props) {
    super(props)

    console.log(props)
  }
  render() {
    console.log('render:', this.props)
    return (
      <div>
        <h1>props: {this.props.age}</h1>
      </div>
    )
  }
}

// 1 传递数据
ReactDOM.render(<Hello name="rose" age={19} />, document.getElementById('root'))

组件的props

推荐阅读