简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  React中元件定義使用詳解

React中元件定義使用詳解

php中世界最好的语言
php中世界最好的语言原創
2018-05-24 14:39:581356瀏覽

這次帶給大家React中元件定義使用詳解，React中元件定義使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

元件

元件可讓你將 UI 分割為一個一個獨立，可重複使用的小元件，並且可以對每個元件進行單獨的設計。

在單一頁面應用程式(SPA)中扮演著重要角色

元件簡單實作－ 函數式元件

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

類別元件－ ES5 語法

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

類別元件－ ES6 語法

import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return (
            <p>
                <h1>Tom</h1>
                <h1>Sam</h1>
            </p>
        ) 
    }
}
ReactDOM.render(
    <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) => {
    return <h1>name-{props.name}</h1>
}
ReactDOM.render(
    <Component1 name="Sam"/>,
    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 name="Sam"/>,
    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>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
            </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>
                <h1>姓名：{this.props.name}</h1>
                <h1>年龄：{this.props.age}</h1>
            </p>
        )
    }
}
//或者
Component1.defaultProps = {
    name: "Sam",
    age: 22
}
//使用
ReactDOM.render(<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>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
                <p>学科：</p>
                <ul>
                {
                    this.props.subjects.map(function(_item){
                        return <li>{_item}</li>
                    })
                }
                </ul>
            </p>
        )
    }
}
//定义属性 name 为字符串且必须有值
Component1.propTypes = {
    name: PropTypes.string
}
ReactDOM.render(<Component1 name="Tom"/>, 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 = () => {
    return <h1>React Component</h1>
}
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)
  • 類別元件－ ES5 語法

    var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
    render: function(){
        return (
            <p>
                <h1>Tom</h1>
                <h1>Sam</h1>
            </p>
        )
    }
})
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)
    類別元件－ ES6 語法
    • import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
    render(){
        return (
            <p>
                <h1>Tom</h1>
                <h1>Sam</h1>
            </p>
        ) 
    }
}
ReactDOM.render(
    <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) => {
    return <h1>name-{props.name}</h1>
}
ReactDOM.render(
    <Component1 name="Sam"/>,
    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 name="Sam"/>,
    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>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
            </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>
                <h1>姓名：{this.props.name}</h1>
                <h1>年龄：{this.props.age}</h1>
            </p>
        )
    }
}
//或者
Component1.defaultProps = {
    name: "Sam",
    age: 22
}
//使用
ReactDOM.render(<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>姓名：{this.props.name}</p>
                <p>年龄：{this.props.age}</p>
                <p>学科：</p>
                <ul>
                {
                    this.props.subjects.map(function(_item){
                        return <li>{_item}</li>
                    })
                }
                </ul>
            </p>
        )
    }
}
//定义属性 name 为字符串且必须有值
Component1.propTypes = {
    name: PropTypes.string
}
ReactDOM.render(<Component1 name="Tom"/>, document.getElementById('p1'));

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

    推荐阅读：

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

    前端中排序算法实例详解

    以上是React中元件定義使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：React中元件渲染使用詳解下一篇：React中元件渲染使用詳解

    相關文章

    看更多