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