react 组件连动效果_react 动态组件

定义的一些组件

AnalyzeMobxDevtools.tsx

function AnalyzeMobxDevtools(){

return (

AnalyzeMobxDevtoolsAnalyzeMobxDevtoolsAnalyzeMobxDevtoolsAnalyzeMobxDevtoolsAnalyzeMobxDevtools

)

}

export default AnalyzeMobxDevtools;

SyncUIStateObservable.tsx

function SyncUIStateObservable(){

return (

SyncUIStateObservableSyncUIStateObservableSyncUIStateObservableSyncUIStateObservableSyncUIStateObservable

)

}

export default SyncUIStateObservable;

归纳所有的组件到一个函数里，便于应用

代码结构

AllComponents.ts

import SyncUIStateObservable from './mobx/SyncUIStateObservable'

import AnalyzeMobxDevtools from './mobx/AnalyzeMobxDevtools'

/**

* 所有的组件 ，用于页面切换

*/

export default {

"mobx": {

2: SyncUIStateObservable,

1: AnalyzeMobxDevtools

},

"jsdesignpar":{

0:1

}

}

页面插入

app.tsx

import logo from './logo.svg';

import './App.css';

import { Layout, Menu, Breadcrumb } from 'antd';

import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

import ReactDOM from 'react-dom'

import React from 'react'

import AllComponents from './AllComponents'

const { SubMenu } = Menu;

const { Header, Content, Sider } = Layout;

function App() {

/**

* 动态插入组件

* @param com

*/

function loadComponent(e: any) {

let container = document.getElementById('container');

// 卸载之前组件

if(container) ReactDOM.unmountComponentAtNode(container)

switch (e.item.props.datatype) {

case 'mobx':

const coms = AllComponents as any

const typeComs = coms[e.item.props.datatype]

ReactDOM.render(React.createElement(typeComs[e.key]), container);

break;

default:

break;

}

}

return (

mode="inline"

defaultSelectedKeys={['1']}

defaultOpenKeys={['sub1']}

style={{ height: '100%', borderRight: 0 }}

>

} title="subnav 1">

option1option2option3option4

} title="subnav 2">

option5option6option7option8

} title="subnav 3">

option9option10option11option12

Home

List

App

className="site-layout-background"

id="container"

style={{

padding: 24,

margin: 0,

minHeight: 280,

}}

>

Content

);

}

export default App;

效果