组件的props
- 要接收组件外部的数据可以通过props来实现
- props用来接收传递给组建的数据
- 数据的传递可以用给组件标签添加属性的方式
- 接收数据:函数组件可以通过参数props来接收数据,类组件可以通过this.props接收数据,
实例:
类组件传递数据:
class Hello extends React.Component {
render() {
console.log(this.props);
return (
<div>
<div>接收到的数据:{this.props.name}</div>
<div>接收到的数据:{this.props.age}</div>
</div>
)
}
}
ReactDOM.render(<Hello name="123" age={19} />, document.querySelector('#root'))
函数组件传递数据:
function Hello(props) {
console.log(props);
return (
<div>
<div>接收到的数据:{props.name}</div>
<div>接收到的数据:{props.age}</div>
</div>
)
}
ReactDOM.render(<Hello name="123" age={19} />, document.querySelector('#root'))
运行以上代码结果如下:
运行以上代码控制台打印结果如下: