组件的props

2021-11-09 10:02:51 阅读：114 来源： 互联网

标签：console render react 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

组件的props