React高階元件的使用

tbrman發表於2019-02-27
React元件

定義：

高階元件就是一個函式，函式接受一個元件引數然後再返回一個元件；
複製程式碼

程式碼理解： 1. 高階元件統一輸出程式碼 import React, {Component} from 'react';

export default (_componet) => {
    class putPutCompont extends Component {
        constructor(super) {
            super();
            this.state = {name: ''}
        }
        
        render() {
            return (
                <div>{this.state.name}</div>
            )
        }
    } 
    return putPutCompont;
}


2. 通過高階元件輸出元件

import React, {Component} from 'react';
import putPutCompont from './putPutCompont'


class childC extends Component {
    
    render() {
        return (
            <div>{this.props.name}</div>
        )
    }
} 

outComponent = putPutCompont(childC)
export default outComponent;

注意：
高階元件就是把name通過props傳遞給目標元件了。目標元件只管從props獲取資料即可。複製程式碼

相關文章