# demo1

### 1、引入组件和样式

[图片附件未整合: _assets/197964140269010944/001-8436aadada.png]

### 2、ecode得目录

# [图片附件未整合: _assets/197964140269010944/002-becce87384.png]

[图片附件未整合: _assets/197964140269010944/003-bfee953289.png]

demo2

### 1、自定义一个单页路由

```typescript
import React from 'react';
import { Route } from 'react-router-dom';
import { regOvProps, appInfo, regReactChildren } from '@weapp/utils';
import { asyncImport,  } from '@weapp/ecodesdk';

const GovernCard = React.lazy(() => asyncImport('${appId}', 'GovernCard'));

const { publicUrl } = appInfo('@weapp/ecodesdk');
console.log("publicUrl",publicUrl)

function onDidMount(store){
  console.log("===",store)
}

const RedCircle = (
  <Route path={`/sp/custom/ljc`}>
    <React.Suspense fallback= {() => { }}>
      <GovernCard onDidMount={onDidMount} />
    </React.Suspense>
  </Route>
);

regOvProps('weappEcodesdk', 'Switch', (props) => {
  regReactChildren(props, RedCircle);
  return props;
}, 0);

//组件
import { action, observable, runInAction } from 'mobx';
import React, { PureComponent } from 'react';

class DemoStore{
   @observable viewId: string = '';

}

export default class GovernCom extends React.PureComponent{
  store = new DemoStore();

   componentDidMount() {
     console.log("---",this.props)
    const {
      onDidMount
    } = this.props;
      onDidMount(this.store)
  }

  render(){

    return "demo--govern"
  }
}
```

### 2、写一个类组件

```typescript
import { action, observable, runInAction } from 'mobx';
import React, { PureComponent } from 'react';

class DemoStore{
   @observable viewId: string = '';

}

export default class GovernCom extends React.PureComponent{
  store = new DemoStore();

   componentDidMount() {
     console.log("---",this.props)
    const {
      onDidMount
    } = this.props;
      onDidMount(this.store)
  }

  render(){

    return "demo--govern"
  }
}
```

[图片附件未整合: _assets/197964140269010944/004-a6d7ff1f1c.png]

# demo3

### 1、给系统管理中心这里加个tab自定义渲染

[图片附件未整合: _assets/197964140269010944/005-0353a347c8.png]

```javascript

import { regOvProps,regOvComponent } from '@weapp/utils';
import { asyncImport,  } from '@weapp/ecodesdk';

const CardDemo = React.lazy(() => asyncImport('${appId}', 'CardDemo'));

regOvProps('weappAuth', 'ComTitle', (props) => {
// console.log("=ComTitle==",props)
 if(props.weId==="g4m6ld_5zn9hc_kwwhcf_iwtqra"){
   return {
     ...props,
   menu:{
     ...props.menu,
     menus:[
       ...props.menu?.menus,
       {content:"自定义",id:"custom"}
     ]
   }}
 }
  return {...props};
}, 0);

regOvComponent('weappAuth', 'RoleSettingContent', (Com) => {
  return React.forwardRef((props, ref) => {
    console.log("RoleSettingContent",props)
    
    if(props.roleSettingStore&&props.roleSettingStore.selectedMenu==="custom"){
      return <div class="weapp-auth-com-layout-main-content ">
          <CardDemo  />
      </div>
    }
   

    return <Com ref={ref} {...props} />;
  });
}, 0);
```

```javascript
import { action, observable, runInAction } from 'mobx';
import React, { PureComponent } from 'react';
import {CorsComponent} from "@weapp/ui";

class DemoStore{
   @observable viewId: string = '';

}

export default class CardDemo extends React.PureComponent{
  store = new DemoStore();

  //  componentDidMount() {
  //    console.log("---",this.props)
  //   const {
  //     onDidMount
  //   } = this.props;
  //     onDidMount(this.store)
  // }

  render(){
    return <>
     <CorsComponent
      app="@weapp/ebdfpage"
      compName="TableViewList"
      pageId="737924086608486406"//必填  表格视图id
     
    />
    </>
  }
}
```
