登录  /  注册
首页 > web前端 > js教程 > 正文

React中组件定义使用详解

php中世界最好的语言
发布： 2018-05-24 14:39:58
原创
1251人浏览过

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

组件

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

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

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

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
    return <h1>React Component</h1>
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)
登录后复制
登录后复制

类组件 —— ES5 语法

var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
    render: function(){
        return (
            <p>
                </p><h1>Tom</h1>
                <h1>Sam</h1>
            
        )
    }
})
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)
登录后复制
登录后复制

类组件 —— ES6 语法

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return (
            <p>
                </p><h1>Tom</h1>
                <h1>Sam</h1>
            
        ) 
    }
}
ReactDOM.render(
    <component1></component1>,
    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) =&gt; {
    return <h1>name-{props.name}</h1>
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)
登录后复制
登录后复制

类组件

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return <h1>name-{this.props.name}</h1> 
    }
}
ReactDOM.render(
    <component1></component1>,
    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 (
            <p>
                </p><p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
            
        )            
    }    
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    static defaultProps = {
        name: 'Tom',
        age: 20
    }
    render(){
        return (
            <p>
                </p><h1>姓名：{this.props.name}</h1>
                <h1>年龄：{this.props.age}</h1>
            
        )
    }
}
//或者
Component1.defaultProps = {
    name: "Sam",
    age: 22
}
//使用
ReactDOM.render(<component1></component1>, 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 (
            <p>
                </p><p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
                <p>学科：</p>
                
登录后复制
登录后复制
                    {                     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

组件

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

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

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

import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () =&gt; {
    return <h1>React Component</h1>
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)
登录后复制
登录后复制

类组件 —— ES5 语法

var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
    render: function(){
        return (
            <p>
                </p><h1>Tom</h1>
                <h1>Sam</h1>
            
        )
    }
})
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)
登录后复制
登录后复制

类组件 —— ES6 语法

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return (
            <p>
                </p><h1>Tom</h1>
                <h1>Sam</h1>
            
        ) 
    }
}
ReactDOM.render(
    <component1></component1>,
    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) =&gt; {
    return <h1>name-{props.name}</h1>
}
ReactDOM.render(
    <component1></component1>,
    document.getElementById('app')
)
登录后复制
登录后复制

类组件

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return <h1>name-{this.props.name}</h1> 
    }
}
ReactDOM.render(
    <component1></component1>,
    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 (
            <p>
                </p><p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
            
        )            
    }    
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    static defaultProps = {
        name: 'Tom',
        age: 20
    }
    render(){
        return (
            <p>
                </p><h1>姓名：{this.props.name}</h1>
                <h1>年龄：{this.props.age}</h1>
            
        )
    }
}
//或者
Component1.defaultProps = {
    name: "Sam",
    age: 22
}
//使用
ReactDOM.render(<component1></component1>, 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 (
            <p>
                </p><p>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
                <p>学科：</p>
                
登录后复制
登录后复制
                    {                     this.props.subjects.map(function(_item){                         return 
  • {_item}
    •                     })                 }                 
                     )     } } //定义属性 name 为字符串且必须有值 Component1.propTypes = {     name: PropTypes.string } ReactDOM.render(, document.getElementById('p1'));

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

react实现选中li高亮步骤详解

前端中排序算法实例详解

以上就是React中组件定义使用详解的详细内容，更多请关注php中文网其它相关文章！

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
来源：php中文网
收藏 点赞
上一篇：React中组件渲染使用详解 下一篇：React中JSX 语法使用详解
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
P粉722478067来自于2024-04-19 15:37:47
0 0 19
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');  &nb...
P粉722478067来自于2024-04-18 23:52:34
0 0 40
关于CSS思维导图的课件在哪？ 课件
凡人来自于2024-04-16 10:10:18
0 0 130
PX自动转换为REM错误  <style>html {   font-size: calc(100vw / 3.75);      }...
凡人来自于2024-04-16 09:34:16
0 0 768
PHP数组从URL参数中获取的行为不如预期 我有一个包含类别ID的URL参数，我想将其视为一个数组，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它从URL参数获取数组：$catI...
P粉785905797来自于2024-04-06 22:09:02
0 1 438
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
P粉738046172来自于2024-04-06 22:01:35
0 2 317
我应该在 apache 中哪里放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用运行状况检查url登录访问日志。基于此链接，他们提到了有关修改Customlog指令的信息。我不是关于需要更改Cust...
P粉573809727来自于2024-04-06 22:03:59
0 1 442
返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
P粉757556355来自于2024-04-06 21:55:20
0 1 266
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
P粉771233336来自于2024-04-06 21:58:04
0 1 357
如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
P粉970736384来自于2024-04-06 21:28:37
0 1 1863
相关专题
更多>
热门推荐
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部