react组件的属性(props)

最新推荐文章于 2024-01-02 15:35:39 发布

AI-Hawk

最新推荐文章于 2024-01-02 15:35:39 发布

阅读量324

点赞数

分类专栏：笔记文章标签： react组件的属性

本文链接：https://blog.csdn.net/weixin_41111563/article/details/101096960

版权

本文探讨了React组件属性(props)的使用，包括如何传递属性、如何在组件内部获取及展示属性值，以及jsx中表达属性值的方法。通过示例说明了如何从父组件向子组件传递title属性，并在jsx中通过this.props.title访问该属性。同时指出React与Vue在数据处理上的区别，强调React组件需要自行接入和使用props，这些props是通过继承Component类获得的。

摘要由CSDN通过智能技术生成

组件的属性(props)

**
调用组件时，跟在组件中的一个或多个称为组件的属性，格式如<组件名属性名1=属性值1 属性名2=属性值2 .../>这就是组件完成自上而下单向数据传递的一个概念，让组件之间传递数据；这就是props（组件的属性）传数据的方式，接收数据的目标组件如何取得传递的数据？ this代表组件本身，组件自身的内部会拿到一个对象，这个对象有多个属性，其中有一个属性就收纳了上层组件给其传递的所有属性，这个属性就是props，这个props收纳了所有属性，可以拿取相应的属性使用。这里会涉及几个方面的内容：a)组件传过来的属性如何传？b)传过来的内容组件内部如何拿到？ c)拿到内容之后如何在组件的jsx中表现出来？还有这里传递内容的值的类型以及如何在jsx中表达（jsx表达式）。

import React,{Component} from 'react';
import ReactDom from 'react-dom';
class App extends Component{
	render(){
		return (
			<div>
				<Header/>
				<Footer/>
			</div>
		)
	}
}
class Footer extends Component{
	render(){
		return (
			<div>footer</div>
		)
	}
}
class Header extends Component{
	render(){
		return (
			<nav>
				<a href