React元件匯入的兩種方式 動態匯入元件的實現

一、 react元件兩種匯入方式

react元件可以通過兩種方式匯入另乙個元件

import(常用)

import component from

'./component'

const component = require('./component')

import component from

'./component'
// => 
const component = require('./component')

當然,不同情況使用的方式也是不一樣的.

下面詳細介紹兩種匯入方式對應的情況(注意這裡不介紹按需載入,可看《前端效能優化之按需載入》)

二、兩種方式對應的 情況

import *** from '***'

一般來說使用import就夠了.但是要注意import需要放在定義元件的外部。這就導致乙個問題:

如果我需要通過動態路徑動態載入元件(這裡並非指按需載入),在class裡面(es6)語法使用import會報下面錯誤:

這時候使用require方法能很好解決

var *** = require('***')

這裡需要注意的是:

用import引入的元件只需要export default即可

而通過require引入的元件需要底部生命module.exports = component

用例子解釋一下:

需求場景: 現在有大量的子元件存放在對應資料夾(如下)

firstcomponent

/index
secordcomponent
/index
thirdcomponent
/index
...

於是我通過require動態載入

//父元件

renderdetail(mode,pagetype)/index`)
return dynamicdetail
}render() = this.props; 這裡的pagetype是判斷載入哪個子元件的條件
//我們先假設乙個
pagetype = firstcomponent; //存在firstcomponent這麼乙個資料夾裡面有乙個index.js元件
let dynamicdetail = this.renderdetail(pagetype); //動態拿到這個元件
return(
classname="detailwried">
div>
)}//子元件
import react from
'react'
export
default
class
firstcomponent
extends
react.component
}module.exports = firstcomponent;

注意這裡可能會遇到乙個問題:

把require裡面的路徑替換成變數的話,

let path = `../../../../components/content/$/children/$/index`

let dynamicdetail = require(path)

//終端

critical dependency: the request of a dependency is an expression
//瀏覽器
can't require module'.'

至此！兩個匯入元件的方式介紹完畢！

擴充套件一下:

React 元件的兩種建立方式

1 使用函式建立元件 函式元件 使用js的函式 或箭頭函式 建立的元件 約定1 函式名稱必須以大寫字母開頭 約定2 函式元件必須有返回值，表示該元件的結構 如果返回值為null，表示不渲染任何內容 const component 哈羅啊 div 或者function component reactd...

React建立元件的兩種方式

function hello props class animal,作用是例項化物件時先執行建構函式的 this.name name this代表的是例項物件 this.age age say ji1 888 例項屬性 static 男 靜態屬性 static class cat extends a...

React元件的兩種建立方式

建立元素 const div react.createelement div 建立元件 const div react.createelement div 元件可以理解成，乙個建立元素集合的模板，當前我可能不需要它生成什麼東西，但我呼叫時，它能幫我生成我要的東西。在react中，元件的建立方式有兩種...