UI元件和容器元件的拆分

2021-09-23 15:19:18 字數 1253 閱讀 4331

1.首先，以前面的todolist為例

以下是原來的todolist中的render函式中的內容，我們可以將元件中關於ui渲染頁面的封裝到乙個檔案中

render() )}


/>


)}
2.在src目錄下新建乙個檔名為todolistui.js。將剛剛的render中的內容複製到todolistui裡面。

3 .這裡需要進一步進行完善,逐條進行;

import  from 'antd';
import react,  from 'react';


import 'antd/dist/antd.css';


import store from './store/index';


import  from './store/actioncreators'


import  from './store/actiontypes'


import  from 'rxjs';


import todolistui from './todolistui';


class todolist extends component


render() 


// handleinputchange(e) 


//通過dispatch(action)把資料傳遞給store


// store.dispatch(action); 


handleinputchange(e) 


handlestorechange() 


// handlebtnclick() ;


//     store.dispatch(action);


// }


handlebtnclick() 


// handleitemdelete(index) 


//     store.dispatch(action);


// }


handleitemdelete(index) 


}export default todolist;
todolistui完整**：

import react,  from 'react';


import  from 'antd';


class todolistui extends component}>)}


/>)}


}export default todolistui;

UI元件 和 容器元件

像原來的 import react,from react import antd dist antd.css import from antd import store from store index.js import from store actioncreators class beauti...

React 拆解元件成UI元件和容器元件

前言 在複雜的元件中，我們最好把元件拆分為ui元件和容器元件以方便我們的管理和維護 import react,from react class test extends component render onmousemove onclick li ul showitem e showindex i...

容器元件和展示元件react redux

react redux的作用是連線 connect store和容器元件的。store是redux提供的，容器元件是react提供的。容器元件 位於應用最頂層的元件，用來與redux連線的。從redux中獲取資料作為props。展示元件 位於應用的中間或者子元件，是純粹的元件，與redux沒有關係。...