在react应用中,可以使用两种方式来定义组件:函数和class类,
函数组件
import React from "react";
function Func_component(props) {
return <div>
<h2>这是一个函数组件:</h2>
<p>{props.name}</p>
</div>
}
export default Func_component
class类组件
import React from "react";
class Class_Component extends React.Component {
render() {
return <div>
<h2>这是一个react的class组件</h2>
<p>{this.props.name}</p>
</div>
}
}
export default Class_Component
当react应用在渲染我们所定义的组件之后,react会把jsx接收到的属性或者子组件转化为单个对象传递给组件,这个对象就是“props”。props只是用来接收父组件传给子组件的参数而已,它并不是组件本身自己的数据,所以组件的Props具有不可更改的特征,这就是react的一个规则:
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
组件如何接收接收props?
先说我们常见的函数组件,和我们在刚开始学习编程的时候一样,我们在定义一个方法的时候,根据需求会接收一些参数。那么react应用中,这样的方法就是“组件”。同样,在函数组件中接收父组件传递过来的参数也需要定义些“形参”,通过形参来接收父组件传过来的“实参”。如以上的函数组件代码中,在定义组件时,设置形参“props”,它是一个包含了组件属性和子组件的一个对象。
在class组件内直接通过this.props来接收父组件传过来的参数值。
文章评论