React中组件定义使用详解

php中世界最好的语言

发布时间：2018-05-24 14:39:58

1565人浏览过

来源于php中文网

原创

这次给大家带来React中组件定义使用详解，React中组件定义使用的注意事项有哪些，下面就是实战案例，一起来看一下。

组件

组件使你可以将 UI 划分为一个一个独立，可复用的小部件，并可以对每个部件进行单独的设计。

在单页面应用(SPA)中扮演着重要角色

组件简单实现 —— 函数式组件

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    return React Component
}
ReactDOM.render(
    ,
    document.getElementById('app')
)

类组件 —— ES5 语法

var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
    render: function(){
        return (
            
                
Tom
                Sam
            
        )
    }
})
ReactDOM.render(
    ,
    document.getElementById('app')
)

类组件 —— ES6 语法

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return (
            
                
Tom
                Sam
            
        ) 
    }
}
ReactDOM.render(
    ,
    document.getElementById('app')
)

效果预览

组件小结

组件名首字母必须为大写
函数返回一个虚拟 DOM 节点
类组件必须要有 render 方法
render 必须返回一个虚拟 DOM 节点
实际工作中，类组件是常用的方式

组件属性(Props)

因为组件的调用是 html 标签的形式，而 html 标签是可以添加属性，所以在 React 的组件当中也是可以添加自定义的属性，而属性的获取则用 this.props

函数式组件

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = (props) => {
    return name-{props.name}
}
ReactDOM.render(
    ,
    document.getElementById('app')
)

类组件

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return name-{this.props.name} 
    }
}
ReactDOM.render(
    ,
    document.getElementById('app')
)

默认属性(DefaultProps)

组件的属性除了可以通过调用的时候以 DOM 节点属性的方式传值，也可以设置默认的属性值，如果调用的时候没有传对应的属性值，则会用默认的属性值。
getDefalutProps 这个方法只会被调用一次。

//es5
var React = require('react');
var ReactDOM = require('react-dom');
var Component1 = React.createClass({
    getDefaultProps: function(){
        return {
            name: 'Tom',
            age: 20
        }
    },
    render: function(){
        return (
            
                
姓名：{this.props.name}

							
								
								
									eMart 网店系统
									功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标
								
								下载 
							
						
                年龄：{this.props.age}
            
        )            
    }    
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    static defaultProps = {
        name: 'Tom',
        age: 20
    }
    render(){
        return (
            
                
姓名：{this.props.name}
                年龄：{this.props.age}
            
        )
    }
}
//或者
Component1.defaultProps = {
    name: "Sam",
    age: 22
}
//使用
ReactDOM.render(, document.getElementById('p1'));

属性的类型规则(propTypes)

通常情况下，在定义一个组件的时候把属性定义好，会加上一些使用的条件限制，比如某些属性值的数据类型必须是数组，或者某些属性不能为空，在这个时候，可以通过 propTypes 来设置。

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'
class Component1 extends React.Component{
    render(){
        return (
            
                
姓名：{this.props.name}
                年龄：{this.props.age}
                学科：
                
                {
                    this.props.subjects.map(function(_item){
                        return {_item}
                    })
                }
                
            
        )
    }
}
//定义属性 name 为字符串且必须有值
Component1.propTypes = {
    name: PropTypes.string
}
ReactDOM.render(, document.getElementById('p1'));

prop 默认情况下是可选，常用的类型：

PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.symbol
PropTypes.any.isRequired

组件