五 组件重写
title: ecode文档 - 五、组件重写 created: 2026-04-19 updated: 2026-04-19 type: reference tags: [oa, ecode, weaver, frontend] related: [oa/ecode-guide.md] source: https://e-cloudstore.com/doc.html
ecode, weaver, frontend] related: [oa/ecode-guide.md] source: https://e-cloudstore.com/doc.html ---#### 五、组件重写
可以对EC全系统组件进行重写，支持[组件站] (外部文档缺失)中大部分组件，重新定义的组件只要遵循原组件的交互要求，即可进行自由定义，我们会不断提供各种案例让大家参考
可以对EC全系统组件进行重写，支持[组件站] (外部文档缺失)中大部分组件，重新定义的组件只要遵循原组件的交互要求，即可进行自由定义，我们会不断提供各种案例让大家参考
[组件站] (外部文档缺失)
1、PC端组件重写
ecodeSDK.overwriteClassFnQueueMapSet(name,option)
ecology版本要求：1906及1906+
ecodeSDK.overwriteClassFnQueueMapSet(name,option)
ecology版本要求：1906及1906+
（1）参数说明
| 参数 | 说明 | 类型 | 可选 | 默认 | 备注 |
|---|---|---|---|---|---|
| name | 组件名 | string | 必填 | ‘’ | |
| option | 复写配置 | object | 必填 | {} | |
| option.fn | 复写钩子函数 | function | 必填 | (Com,newProps)=>{} | |
| option.order | 复写排序 | integer | 选填 | 0 | |
| option.desc | 复写说明 | string | 选填 | ‘’ | 无 |
参数 说明 类型 可选 默认 备注
参数 说明 类型 可选 默认 备注 参数说明类型可选默认备注
name 组件名 string 必填 ‘’
option 复写配置 object 必填 {}
option.fn 复写钩子函数 function 必填 (Com,newProps)=>{}
option.order 复写排序 integer 选填 0
option.desc 复写说明 string 选填 ‘’ 无
name 组件名 string 必填 ‘’
name组件名string必填‘’ option 复写配置 object 必填 {}
option复写配置object必填{} option.fn 复写钩子函数 function 必填 (Com,newProps)=>{}
option.fn复写钩子函数function必填(Com,newProps)=>{} option.order 复写排序 integer 选填 0
option.order复写排序integer选填0 option.desc 复写说明 string 选填 ‘’ 无 option.desc复写说明string选填‘’无
option.fn钩子函数用法
option.fn钩子函数用法 er选填0 option.desc 复写说明 string 选填 ‘’ 无 option.desc复写说明string选填‘’无
option.fn钩子函数用法
option.fn钩子函数用法javascript
ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser',{
fn:(Com,newProps)=>{
//Com是当前复写的原组件
//newProps是当前复写的原组件参数
return {
com:Com,
props:newProps
};
}
},
order:1,
desc:'浏览按钮复写'
})
1. 1. `ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser',{`
2. ` fn:(Com,newProps)=>{`
3. ` //Com是当前复写的原组件`
4. ` //newProps是当前复写的原组件参数`
5. ` return {`
6. ` com:Com,`
7. ` props:newProps`
8. ` };`
9. ` }`
10. ` },`
11. ` order:1,`
12. ` desc:'浏览按钮复写'`
13. `})`
`ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser',{``ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser',{`ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser',{` fn:(Com,newProps)=>{`` fn:(Com,newProps)=>{` fn:(Com,newProps)=>{` //Com是当前复写的原组件`` //Com是当前复写的原组件` //Com是当前复写的原组件` //newProps是当前复写的原组件参数`` //newProps是当前复写的原组件参数` //newProps是当前复写的原组件参数` return {`` return {` return {` com:Com,`` com:Com,` com:Com,` props:newProps`` props:newProps` props:newProps` };`` };` };` }`` }` }` },`` },` },` order:1,`` order:1,` order:1,` desc:'浏览按钮复写'`` desc:'浏览按钮复写'` desc:'浏览按钮复写'`})``})`})
###### （2）基本例子
> register.js：需要前置加载
register.js：需要前置加载
```javascript
let enable = true;
)``})`})
###### （2）基本例子
> register.js：需要前置加载
register.js：需要前置加载
```javascript
let enable = true;const NewWeaBrowser = (props)=>{ //此函数不允许写在复写方法内，会导致实例重复创建，也就是dimout不断执行
const acParams = {
appId:'${appId}', //appId会自动识别
name:'NewWeaBrowserCom', //模块名称
isPage:false, //是否是路由页面
noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
}
const NewCom = props.Com;
return window.comsMobx?ecodeSDK.getAsyncCom(acParams):(<NewCom {...props} />);
}
ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser',{
fn:(Com,newProps)=>{
if(!enable) return ; //总开关
const {hash} = window.location;
if(!hash.startsWith('#/main/workflow/req')) return ;
const baseInfo = WfForm.getBaseInfo();
//判断流程id
if(baseInfo.workflowid!==44) return ;
//判断字段id，并且判断组件是否允许不能复写，如果不能复写，直接返回空
if(newProps.fieldid!=="6318"||newProps._noOverwrite) return ;
newProps.Com = Com; //如果需要原组件，可带上
return {
com:NewWeaBrowser,
props:newProps
};
}
});
let enable = true;
2. 3. `const NewWeaBrowser = (props)=>{ //此函数不允许写在复写方法内，会导致实例重复创建，也就是dimout不断执行`
4. ` const acParams = {`
5. ` appId:'${appId}', //appId会自动识别`
6. ` name:'NewWeaBrowserCom', //模块名称`
7. ` isPage:false, //是否是路由页面`
8. ` noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载`
9. ` }`
10. ` const NewCom = props.Com;`
11. ` return window.comsMobx?ecodeSDK.getAsyncCom(acParams):(<NewCom {...props} />);`
12. `}`
13.
14. ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser',{
15. fn:(Com,newProps)=>{
16. if(!enable) return ; //总开关
17. const {hash} = window.location;
18. if(!hash.startsWith('#/main/workflow/req')) return ;
19. const baseInfo = WfForm.getBaseInfo();
20. //判断流程id
21. if(baseInfo.workflowid!==44) return ;
22. //判断字段id，并且判断组件是否允许不能复写，如果不能复写，直接返回空
23. if(newProps.fieldid!=="6318"||newProps._noOverwrite) return ;
24. newProps.Com = Com; //如果需要原组件，可带上
25. return {
26. com:NewWeaBrowser,
27. props:newProps
28. };
29. }
30. });
let enable = true;``let enable = true;let enable = true;const NewWeaBrowser = (props)=>{ //此函数不允许写在复写方法内，会导致实例重复创建，也就是dimout不断执行``const NewWeaBrowser = (props)=>{ //此函数不允许写在复写方法内，会导致实例重复创建，也就是dimout不断执行`const NewWeaBrowser = (props)=>{ //此函数不允许写在复写方法内，会导致实例重复创建，也就是dimout不断执行` const acParams = {`` const acParams = {` const acParams = {` appId:'${appId}', //appId会自动识别`` appId:'${appId}', //appId会自动识别` a
{` const acParams = {` appId:'${appId}', //appId会自动识别`` appId:'${appId}', //appId会自动识别` a {` const acParams = {` appId:'${appId}', //appId会自动识别`` appId:'${appId}', //appId会自动识别` appId:'${appId}', //appId会自动识别` name:'NewWeaBrowserCom', //模块名称`` name:'NewWeaBrowserCom', //模块名称` name:'NewWeaBrowserCom', //模块名称` isPage:false, //是否是路由页面`` isPage:false, //是否是路由页面` isPage:false, //是否是路由页面` noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载`` noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载` noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载` }`` }` }` const NewCom = props.Com;`` const NewCom = props.Com;` const NewCom = props.Com;` return window.comsMobx?ecodeSDK.getAsyncCom(acParams):(<NewCom {...props} />);`` return window.comsMobx?ecodeSDK.getAsyncCom(acParams):(<NewCom {...props} />);` return window.comsMobx?ecodeSDK.getAsyncCom(acParams):(<NewCom {...props} />);`}``}`}ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser',{ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser',{`ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser',{` fn:(Com,newProps)=>{ fn:(Com,newProps)=>{fn:(Com,newProps)=>{ if(!enable) return ; //总开关if(!enable) return ; //总开关` if(!enable) return ; //总开关` const {hash} = window.location; const {hash} = window.location;const {hash} = window.location; if(!hash.startsWith('#/main/workflow/req')) return ;if(!hash.startsWith('#/main/workflow/req')) return ;` if(!hash.startsWith('#/main/workflow/req')) return ;` const baseInfo = WfForm.getBaseInfo(); const baseInfo = WfForm.ge
/workflow/req')) return ;const baseInfo = WfForm.getBaseInfo();`` const baseInfo = WfForm.ge/workflow/req')) return ; const baseInfo = WfForm.getBaseInfo();const baseInfo = WfForm.getBaseInfo();` const baseInfo = WfForm.getBaseInfo();` //判断流程id //判断流程id//判断流程id if(baseInfo.workflowid!44) return ;if(baseInfo.workflowid!==44) return ;` if(baseInfo.workflowid!==44) return ;` //判断字段id，并且判断组件是否允许不能复写，如果不能复写，直接返回空 //判断字段id，并且判断组件是否允许不能复写，如果不能复写，直接返回空//判断字段id，并且判断组件是否允许不能复写，如果不能复写，直接返回空 if(newProps.fieldid!"6318"||newProps._noOverwrite) return ;if(newProps.fieldid!=="6318"||newProps._noOverwrite) return ;` if(newProps.fieldid!=="6318"||newProps._noOverwrite) return ;` newProps.Com = Com; //如果需要原组件，可带上 newProps.Com = Com; //如果需要原组件，可带上newProps.Com = Com; //如果需要原组件，可带上 return {return {` return {` com:NewWeaBrowser, com:NewWeaBrowser,com:NewWeaBrowser, props:newPropsprops:newProps` props:newProps` }; };}; }}` }`});});});
props:newProps`` props:newProps props:newProps};`` }; };}`` } }});``});});> index.js：不需要前置加载，所有非前置加载js，会被发布成模块 /cloudstore/release/${appId}/index.js
index.js：不需要前置加载，所有非前置加载js，会被发布成模块 /cloudstore/release/${appId}/index.js
const {WeaBrowser} = ecCom;
class NewWeaBrowserCom extends React.Component {
constructor(props) { //初始化，固定语法
super(props);
this.state = {}
}
render() {
let newProps = {...this.props};
//复写组件的时候，必须带上_noOverwrite参数，避免被复写的组件又被复写导致死循环
return (
<WeaBrowser {...newProps} _noOverwrite />
)
}
}
//发布模块
ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);
//发布模块
ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);
`1. `const {WeaBrowser} = ecCom;`
2.
3. class NewWeaBrowserCom extends React.Component {
4. constructor(props) { //初始化，固定语法
5. super(props);
6. this.state = {}
7. }
8. render() {
9. let newProps = {...this.props};
10. //复写组件的时候，必须带上_noOverwrite参数，避免被复写的组件又被复写导致死循环
11. return (
12. <WeaBrowser {...newProps} _noOverwrite />
13. )
14. }
15. }
16. 17. `//发布模块`
18. `ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);`
`const {WeaBrowser} = ecCom;const {WeaBrowser} = ecCom;const {WeaBrowser} = ecCom;`````class NewWeaBrowserCom extends React.Component {``class NewWeaBrowserCom extends React.Component {class NewWeaBrowserCom extends React.Component {constructor(props) { //初始化，固定语法`` constructor(props) { //初始化，固定语法 constructor(props) { //初始化，固定语法super(props);`` super(props); super(props);this.state = {}`` this.state = {} this.state = {}}`` } }render() {`` render() { render() {let newProps = {...this.props};`` let newProps = {...this.props}; let newProps = {...this.props};//复写组件的时候，必须带上_noOverwrite参数，避免被复写的组件又被复写导致死循环`` //复写组件的时候，必须带上_noOverwrite参数，避免被复写的组件又被复写导致死循环 //复写组件的时候，必须带上_noOverwrite参数，避免被复写的组件又被复写导致死循环return (`` return ( return (<WeaBrowser {...newProps} _noOverwrite />`` <WeaBrowser {...newProps} _noOverwrite /> )`` ) )}`` } }}``}}//发布模块``//发布模块`//发布模块`ec
rowser {...newProps} _noOverwrite />` )`` )` )` }`` }` }`}``}`}//发布模块//发布模块`//发布模块`ecrowser {...newProps} _noOverwrite />` ) )) }}` }`}}}`````//发布模块``//发布模块//发布模块ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);``ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);
ewWeaBrowserCom',NewWeaBrowserCom);`ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);###### （3）如何定位组件及其参数
参考第四章组件参数复写sdk 第1节第（3）点
参考第四章组件参数复写sdk 第1节第（3）点
（4）如何开发调试
参考第四章组件参数复写sdk 第1节第（4）点
参考第四章组件参数复写sdk 第1节第（4）点
2、MOBILE端组件重写
ecodeSDK.overwriteMobileClassFnQueueMapSet(name,option)
ecology版本要求：1906及1906+
ecodeSDK.overwriteMobileClassFnQueueMapSet(name,option)
ecology版本要求：1906及1906+
（1）参数说明
| 参数 | 说明 | 类型 | 可选 | 默认 | 备注 |
|---|---|---|---|---|---|
| name | 组件名 | string | 必填 | ‘’ | |
| option | 复写配置 | object | 必填 | {} | |
| option.fn | 复写钩子函数 | function | 必填 | (Com,newProps)=>{} | |
| option.order | 复写排序 | integer | 选填 | 0 | |
| option.desc | 复写说明 | string | 选填 | ‘’ | 无 |
参数 说明 类型 可选 默认 备注
参数 说明 类型 可选 默认 备注 参数说明类型可选默认备注
name 组件名 string 必填 ‘’
option 复写配置 object 必填 {}
option.fn 复写钩子函数 function 必填 (Com,newProps)=>{}
option.order 复写排序 integer 选填 0
option.desc 复写说明 string 选填 ‘’ 无
name 组件名 string 必填 ‘’
name组件名string必填‘’ option 复写配置 object 必填 {}
option复写配置object必填{} option.fn 复写钩子函数 function 必填 (Com,newProps)=>{}
option.fn复写钩子函数function必填(Com,newProps)=>{} option.order 复写排序 integer 选填 0
option.order复写排序integer选填0 option.desc 复写说明 string 选填 ‘’ 无 option.desc复写说明string选填‘’无
option.fn钩子函数用法
option.fn钩子函数用法
ecodeSDK.overwriteMobileClassFnQueueMapSet('WeaBrowser',{
fn:(Com,newProps)=>{
//Com是当前复写的原组件
//newProps是当前复写的原组件参数
return {
com:Com,
props:newProps
};
}
},
order:1,
desc:'浏览按钮复写'
})
`1. `ecodeSDK.overwriteMobileClassFnQueueMapSet('WeaBrowser',{`
2. ` fn:(Com,newProps)=>{`
3. ` //Com是当前复写的原组件`
4. ` //newProps是当前复写的原组件参数`
5. ` return {`
6. ` com:Com,`
7. ` props:newProps`
8. ` };`
9. ` }`
10. `},`
11. ` order:1,`
12. ` desc:'浏览按钮复写'`
13. `})`
`ecodeSDK.overwriteMobileClassFnQueueMapSet('WeaBrowser',{ecodeSDK.overwriteMobileClassFnQueueMapSet('WeaBrowser',{ecodeSDK.overwriteMobileClassFnQueueMapSet('WeaBrowser',{ fn:(Com,newProps)=>{fn:(Com,newProps)=>{` fn:(Com,newProps)=>{` //Com是当前复写的原组件 //Com是当前复写的原组件//Com是当前复写的原组件 //newProps是当前复写的原组件参数//newProps是当前复写的原组件参数` //newProps是当前复写的原组件参数` return { return {return { com:Com,com:Com,` com:Com,` props:newProps props:newPropsprops:newProps };};` };` } }}},},`},` order:1, order:1,order:1, desc:'浏览按钮复写'desc:'浏览按钮复写'` desc:'浏览按钮复写'`})})`})
（2）基本例子
register.js：需要前置加载
register.js：需要前置加载
let enable = true;
const NewWeaBrowser = (props)=>{ //此函数不允许写在复写方法内，会导致实例重复创建，也就是dimout不断执行
const acParams = {
appId:'${appId}', //appId会自动识别
name:'NewWeaBrowserCom', //模块名称
isPage:false, //是否是路由页面
noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
}
//const NewCom = props.Com;
return ecodeSDK.getAsyncCom(acParams);
}
s，通常为了减少css数量，css默认前置加载
}
//const NewCom = props.Com;
return ecodeSDK.getAsyncCom(acParams);
}ecodeSDK.overwriteMobileClassFnQueueMapSet('Browser',{
fn:(Com,newProps)=>{
if(!enable) return ; //总开关
const {hash} = window.location;
if(!hash.startWith('#/req')) return ;
const baseInfo = WfForm.getBaseInfo();
//判断流程id
if(baseInfo.workflowid!==44) return ;
//判断字段id，并且判断组件是否允许不能复写，如果不能复写，直接返回空
if(newProps.fieldid!=="6318"||newProps._noOverwrite) return ;
//newProps.Com = Com; //如果需要原组件，可带上
return {
com:NewWeaBrowser,
props:newProps
};
}
});
`1. `let enable = true;`
2.
3. const NewWeaBrowser = (props)=>{ //此函数不允许写在复写方法内，会导致实例重复创建，也就是dimout不断执行
4. const acParams = {
5. appId:'${appId}', //appId会自动识别
6. name:'NewWeaBrowserCom', //模块名称
7. isPage:false, //是否是路由页面
8. noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载
9. }
10. //const NewCom = props.Com;
11. return ecodeSDK.getAsyncCom(acParams);
12. }
13. 14. `ecodeSDK.overwriteMobileClassFnQueueMapSet('Browser',{`
15. ` fn:(Com,newProps)=>{`
16. ` if(!enable) return ; //总开关`
17. ` const {hash} = window.location;`
18. ` if(!hash.startWith('#/req')) return ;`
19. ` const baseInfo = WfForm.getBaseInfo();`
20. ` //判断流程id`
21. ` if(baseInfo.workflowid!==44) return ;`
22. ` //判断字段id，并且判断组件是否允许不能复写，如果不能复写，直接返回空`
23. ` if(newProps.fieldid!=="6318"||newProps._noOverwrite) return ;`
24. ` //newProps.Com = Com; //如果需要原组件，可带上`
25. ` return {`
26. ` com:NewWeaBrowser,`
27. ` props:newProps`
28. ` };`
29. ` }`
30. `});`
`let enable = true;let enable = true;let enable = true;`````const NewWeaBrowser = (props)=>{ //此函数不允许写在复写方法内，会导致实例重复创建，也就是dimout不断执行``const NewWeaBrowser = (props)=>{ //此函数不允许写在复写方法内，会导致实例重复创建，也就是dimout不断执行const NewWeaBrowser = (props)=>{ //此函数不允许写在复写方法内，会导致实例重复创建，也就是dimout不断执行const acParams = {`` const acParams = { const acParams = {appId:'${appId}', //appId会自动识别`` appId:'${appId}', //appId会自动识别 appId:'${appId}', //appId会自动识别name:'NewWea
/appId会自动识别`` appId:'${appId}', //appId会自动识别 appId:'${appId}', //appId会自动识别name:'NewWea/appId会自动识别`` appId:'${appId}', //appId会自动识别 appId:'${appId}', //appId会自动识别name:'NewWeaBrowserCom', //模块名称`` name:'NewWeaBrowserCom', //模块名称 name:'NewWeaBrowserCom', //模块名称isPage:false, //是否是路由页面`` isPage:false, //是否是路由页面 isPage:false, //是否是路由页面noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载`` noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载 noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载}`` } }//const NewCom = props.Com;`` //const NewCom = props.Com; //const NewCom = props.Com;return ecodeSDK.getAsyncCom(acParams);`` return ecodeSDK.getAsyncCom(acParams); return ecodeSDK.getAsyncCom(acParams);}``}}```ecodeSDK.overwriteMobileClassFnQueueMapSet('Browser',{ecodeSDK.overwriteMobileClassFnQueueMapSet('Browser',{ecodeSDK.overwriteMobileClassFnQueueMapSet('Browser',{ fn:(Com,newProps)=>{fn:(Com,newProps)=>{` fn:(Com,newProps)=>{` if(!enable) return ; //总开关 if(!enable) return ; //总开关if(!enable) return ; //总开关 const {hash} = window.location;const {hash} = window.location;` const {hash} = window.location;` if(!hash.startWith('#/req')) return ; if(!hash.startWith('#/req')) return ;if(!hash.startWith('#/req')) return ; const baseInfo = WfForm.getBaseInfo();const baseInfo = WfForm.getBaseInfo();` const baseInfo = WfForm.getBaseInfo();` //判断流程id //判断流程id//判断流程id if(baseInfo.workflowid!44) return ;if(baseInfo.workflowid!==44) return ;` if(baseInfo.workflowid
aseInfo.workflowid!==44) return ; if(baseInfo.workflowid!==44) return ;if(baseInfo.workflowidaseInfo.workflowid!==44) return ;`` if(baseInfo.workflowid!==44) return ; if(baseInfo.workflowid!==44) return ;//判断字段id，并且判断组件是否允许不能复写，如果不能复写，直接返回空`` //判断字段id，并且判断组件是否允许不能复写，如果不能复写，直接返回空 //判断字段id，并且判断组件是否允许不能复写，如果不能复写，直接返回空if(newProps.fieldid!=="6318"||newProps._noOverwrite) return ;`` if(newProps.fieldid!=="6318"||newProps._noOverwrite) return ; if(newProps.fieldid!"6318"||newProps._noOverwrite) return ;//newProps.Com = Com; //如果需要原组件，可带上`` //newProps.Com = Com; //如果需要原组件，可带上 //newProps.Com = Com; //如果需要原组件，可带上return {`` return { return {com:NewWeaBrowser,`` com:NewWeaBrowser, com:NewWeaBrowser,props:newProps`` props:newProps props:newProps};`` }; };}`` } }});``});});
props:newPropsprops:newProps` props:newProps` }; };}; }}` }`});});`});> index.js：不需要前置加载，所有非前置加载js，会被发布成模块 /cloudstore/release/${appId}/index.js
index.js：不需要前置加载，所有非前置加载js，会被发布成模块 /cloudstore/release/${appId}/index.js
const {Browser} = WeaverMobile;
class NewWeaBrowserCom extends React.Component {
constructor(props) { //初始化，固定语法
super(props);
this.state = {}
}
render() {
let newProps = {...this.props};
//复写组件的时候，必须带上_noOverwrite参数，避免被复写的组件又被复写导致死循环
return (
<Browser {...newProps} _noOverwrite />
)
}
}
//发布模块
ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);
//发布模块
ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);
`1. `const {Browser} = WeaverMobile;`
2.
3. class NewWeaBrowserCom extends React.Component {
4. constructor(props) { //初始化，固定语法
5. super(props);
6. this.state = {}
7. }
8. render() {
9. let newProps = {...this.props};
10. //复写组件的时候，必须带上_noOverwrite参数，避免被复写的组件又被复写导致死循环
11. return (
12. <Browser {...newProps} _noOverwrite />
13. )
14. }
15. }
16. 17. `//发布模块`
18. `ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);`
`const {Browser} = WeaverMobile;const {Browser} = WeaverMobile;const {Browser} = WeaverMobile;`````class NewWeaBrowserCom extends React.Component {``class NewWeaBrowserCom extends React.Component {class NewWeaBrowserCom extends React.Component {constructor(props) { //初始化，固定语法`` constructor(props) { //初始化，固定语法 constructor(props) { //初始化，固定语法super(props);`` super(props); super(props);this.state = {}`` this.state = {} this.state = {}}`` } }render() {`` render() { render() {let newProps = {...this.props};`` let newProps = {...this.props}; let newProps = {...this.props};//复写组件的时候，必须带上_noOverwrite参数，避免被复写的组件又被复写导致死循环`` //复写组件的时候，必须带上_noOverwrite参数，避免被复写的组件又被复写导致死循环 //复写组件的时候，必须带上_noOverwrite参数，避免被复写的组件又被复写导致死循环return (`` return ( return (<Browser {...newProps} _noOverwrite />`` <Browser {...newProps} _noOverwrite /> )`` ) )}`` } }}``}}//发布模块``//发布模块`//发布模
` <Browser {...newProps} _noOverwrite />` )`` )` )` }`` }` }`}``}`}//发布模块//发布模块`//发布模` <Browser {...newProps} _noOverwrite />` ) )) }}` }`}}}`````//发布模块``//发布模块//发布模块ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);``ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);
ewWeaBrowserCom',NewWeaBrowserCom);`ecodeSDK.setCom('${appId}','NewWeaBrowserCom',NewWeaBrowserCom);###### （3）如何定位组件及其参数
参考第四章组件参数复写sdk 第1节第（3）点
参考第四章组件参数复写sdk 第1节第（3）点
（4）如何开发调试
参考第四章组件参数复写sdk 第1节第（4）点
参考第四章组件参数复写sdk 第1节第（4）点
⚖️ 实现方式对比: 本文档介绍的是完全替换组件类（深度定制，风险较高）。 如果只需修改组件参数，请参考 四-组件参数复写.md。