---
title: "正文只读组件(基线20250301，weapp-odoc 1.22.0 以上)"
publicId: "9cb6e89d-6a88-46c2-866c-7fcb0a78c409"
source: "https://weapp.eteams.cn/build/techdoc/wdoc/index.html#/public/doc/9cb6e89d-6a88-46c2-866c-7fcb0a78c409"
---
有两种方式，请根据需要选择其中一种即可。

# 1. 跟随正文字段显示

默认会显示在表单上正文字段的下方。

此种方式开发简单，但是不够灵活。

```javascript
//是否显示只读正文区域
const showReadOnlyText = (config: any) => {
  const { showOdocText, showTextColumn,docId } = config;
  /**
   * showOdocText：是否显示正文
   * showTextColumn：true：分栏显示，false：标签页显示
   * docId：大于0，表示正文已经存在
   */
  return showOdocText && !showTextColumn && Number(docId) > 0;
}

regOvProps('weappOdoc', 'OdocFiledInForm', props => {
  props.showReadOnlyText = showReadOnlyText;
  return props;
});
```

# **2. 公文流程表单自定义**

获取到公文暴露的组件，可以按照需求，进行复杂的布局，但是开发稍微复杂一点。

**文件：entry.js**

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

//是否显示只读正文区域
const showReadOnlyText = (config: any) => {
  /**
   * showOdocText：true：显示正文
   * showTextColumn：true：分栏显示，false：标签页显示
   * docId：大于0，表示正文已经存在
   */
  const { showOdocText, showTextColumn,docId } = config;
  return showOdocText && !showTextColumn && Number(docId) > 0;
}


/**
 * 自定义只读正文区域的样式
 */
regOvProps('weappOdoc', 'OdocReadOnlyText', props => {
  //支持自定义内联样式
  props.customStyle = { height: '800px'};
  //支持自定义样式
  props.className = 'custom-area-cls';    
  return props;
});

/**
*  整个过程共分两步进行
*/

/**
 * 第一步：控制只读正文区域是否显示
 */
regOvProps('weappOdoc', 'FlowFormContent', props => {
  props.showReadOnlyText = showReadOnlyText;
  return props;
});

/**
 * 第二步：复写组件，实现布局自定义
 */
regOvComponent('weappOdoc', 'OdocFormLayout', Com => {
  return React.forwardRef((props, ref) => {
    return (
      <React.Suspense fallback={() => { }}>
        <CustomLayout {...props} orignalCom={Com} />
      </React.Suspense>
    );
  });
});
```

**文件：CustomLayout.js**

简单的实例，说明如果获取只读正文区域的组件，更复杂的情况请根据需要调整

```javascript
import { observer } from "mobx-react";
import { Layout } from '@weapp/ui';

@observer
export default class CustomLayout extends React.Component<any, any> {
  render() {
    const { blocks, orignalCom: Com } = this.props;
    return (
      <div className={'custom-odoc-form-layout'}>
        <Layout>
          <Layout.Box type='content'>{blocks?.get('OdocReadOnlyText')?.()}</Layout.Box>
          <Layout.Box type='side' width={700} right={true}><Com {...this.props} /></Layout.Box>
        </Layout>
      </div>
    );
  }
}
```
