React专栏

【04】react组件和props接收参数

读心悦 · 10月8日 · 2020年 本文760字 · 阅读2分钟41

在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来接收父组件传过来的参数值。

0 条回应

×