其他分享
首页 > 其他分享> > 组件的props

组件的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'))

 

标签:console,render,react,props,组件,接收数据
来源: https://www.cnblogs.com/wsl56/p/15527454.html