react基础 react组件和组件属性

发表于 分类于 ， ， 阅读次数： Changyan： 本文字数： 848 阅读时长 ≈ 1 分钟
react基础 react的函数组件和类组件的创建、使用，和组件属性的使用

组件和组件属性

包含内容、样式和功能的UI单元。

创建一个组件

组件的名称首字母必须大写

函数组件

返回一个React 元素

1
2
3
function MyComponent(){
    return <h1>函数组件</h1>
}

类组件

类必须继承自React.Component

必须包含一个render方法，用来渲染组件，返回React元素

1
2
3
4
5
class ClassComponent extends React.Component {
    render(){
        return <h1>类组件</h1>
    }
}

组件的使用

  1. 当成一个普通函数调用
1
{MyComponent()}
  1. 作为一个DOM元素
1
<MyComponent/>

组件的属性

数据属于谁，谁才有权力改动

使用小驼峰命名

组件的属性不可以改变（只读属性）

  1. 对于函数组件，属性会作为一个对象的一个属性，传递给函数的参数
  2. 对于类组件，属性会作为一个对象的属性，传递给类的构造函数的参数(会在构造函数中自动调用super(props)),可以通过this.props[属性名]获取参数
1
2
3
4
5
6
7
class ClassComponent extends React.Component {
    render(){
        return <h1>类组件：{this.props.str}</h1>
    }
}

<ClassComponent str="类组件参数"></ClassComponent>
1
2
3
4
5
6
function MyComponent(props){
    return <h1>函数组件:{props.str}</h1>
}

<MyComponent str="函数参数"/>