七、'destroyInactiveTabPane' tabs切换时销毁其他tabs栏内容

一、封装的意义

首先要明白封装的意义是什么？封装是为了让相同的代码不必多次重写，将其封装成组件，一次书写多处调用，大大提升代码的性能，因此在遇到有相同代码的情况下，要养成良好习惯，多多封装公用组件。

二、封装的步骤

1.引入andt中的table

2.创建column属性传入table的colums属性

    const column = [
      {
        title: '变量名',
        dataIndex: 'env_key',
        key: '1',
        width: '30%',
        editable: true,
        render: (text,) => {
          return  <span>
                    {text ? text :"-"}
                  </span>
        }
      },
      {
        title: '变量值',
        dataIndex: 'env_value',
        key: '2',
        width: '30%',
        editable: true,
        render: (text) => {
          return  <span>
                    {text ? text :"-"}
                  </span>
        }
      },
      {
        title: '说明',
        dataIndex: 'env_explain',
        key: '3',
        width: '25%',
        editable: true,
        render: (text) => {
          return  <span>
                    {text ? text :"-"}
                  </span>
        }
      }
    ];

3.做空值处理

这里的“dataSource”属性的值是从外面传进来的，因此我们不知道传进来的是空数组还是有数据的数组，为了后面的值能渲染出来，我们需要多重判断。

{value && value.length > 0 ? (
            <Table
              style={
   
   { width: '100%', overflowX: 'auto' }}
              columns={column}
              dataSource={value}
              pagination={true}
            />
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )}

//此段代码可以简化为一个三元运算符
{ value && value.length > 0  ?  ( 1 ) :( 2 ) }
//意思是value为真 并且 value这个数组不为空 则执行 1，否则执行2


//为二时打印空状态
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
//这个也需要引入，是antd的一个ui

注意：

数组的判断空数组的方法是数组.length > 0
对象判断空对象的方法是 Object.keys(对象).length > 0

在写完以后记得 export default 抛出。

三、render函数的使用

1.模拟一组数据

env_management: [
                { env_key: 'LINKERD2_PROXY_LOG', env_value: 'warn,linkerd=info', env_explain: '' },
                { env_key: 'LINKERD2_PROXY_LOG_FORMAT', env_value: 'plain', env_explain: '' },
                { env_key: 'LINKERD2_PROXY_DESTINATION_SVC_ADDR', env_value: 'linkerd-dst-headless.linkerd.svc.cluster.local.:8086', env_explain: '' },
                { env_key: 'LINKERD2_PROXY_DESTINATION_PROFILE_NETWORKS', env_value: '10.0.0.0/8,100.64.0.0/10,172.16.0.0/12,192.168.0.0/16', env_explain: '' },
                { env_key: 'LINKERD2_PROXY_POLICY_SVC_ADDR', env_value: 'linkerd-policy.linkerd.svc.cluster.local.:8090', env_explain: '' },
                { env_key: 'LINKERD2_PROXY_POLICY_WORKLOAD', env_value: '$(_pod_ns):$(_pod_name)', env_explain: '' },
                { env_key: 'LINKERD2_PROXY_INBOUND_DEFAULT_POLICY', env_value: 'all-unauthenticated', env_explain: '' },
                { env_key: 'LINKERD2_PROXY_POLICY_CLUSTER_NETWORKS', env_value: '10.0.0.0/8,100.64.0.0/10,172.16.0.0/12,192.168.0.0/16', env_explain: '' },
                { env_key: 'LINKERD2_PROXY_INBOUND_CONNECT_TIMEOUT', env_value: '100ms', env_explain: '' },
                { env_key: 'LINKERD2_PROXY_OUTBOUND_CONNECT_TIMEOUT', env_value: '1000ms', env_explain: '' },
                { env_key: 'LINKERD2_PROXY_CONTROL_LISTEN_ADDR', env_value: '0.0.0.0:4190', env_explain: '' }
            ],

2.传入组件

3.接收数据打印render函数的三个参数

text ：对应本次循环的列文本内容
record：对应的本次循环的行内容
index：对应本次循环在数组中的索引下标

4.使用render函数处理空数据

四、页面展示

空值状态

有值状态

五、完整代码

/* eslint-disable camelcase */
import {
  Card,
  Table,
  Empty
} from 'antd';

import React, { Fragment, PureComponent } from 'react';

class EnvVariable extends PureComponent {
  constructor(props) {
    super(props);

  }
  render() {
    const { value } = this.props
    const column = [
      {
        title: '变量名',
        dataIndex: 'env_key',
        key: '1',
        width: '30%',
        editable: true,
        render: (text) => {
          return <span>
                    {text ? text :"-"}
                </span>
        }
      },
      {
        title: '变量值',
        dataIndex: 'env_value',
        key: '2',
        width: '30%',
        editable: true,
        render: (text) => {
          return <span>
                    {text ? text :"-"}
                </span>
        }
      },
      {
        title: '说明',
        dataIndex: 'env_explain',
        key: '3',
        width: '25%',
        editable: true,
        render: (text) => {
          return <span>
                    {text ? text :"这是用render函数做的空值处理"}
                </span>
        }
      }
    ];

    return (
      <Fragment>
        <Card
          style={
   
   {
            marginBottom: 24
          }}
          title="环境变量"
        >
          {value && value.length > 0 ? (
            <Table
              style={
   
   { width: '100%', overflowX: 'auto' }}
              columns={column}
              dataSource={value}
              pagination={true}
            />
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )}
        </Card>
      </Fragment>
    );
  }
}


export default EnvVariable;

2022年7月13日补充

———————————————————————————————————————————

六、antd中td内容换行处理

今天工作时修改一个bug，在弹窗页面中展示一个表格，td中的内容过长导致超出弹窗的宽度，显示在弹窗范围以外。如图所示。

最开始认为是表格的宽写死了，或者没有继承外部盒子100%的宽，后来发现并非如此，table表格默认一行展示，我们需要通过render函数在外层包一个盒子，设定固定的宽并让其折行显示

关键知识点：

1.使用render函数包装内容。

 columns={[
          {
            title: '变量名',
            dataIndex: 'attr_name',
            key: 'attr_name',
            align: 'center',
            render: (text) =>{
              return <div className={styles.valueStyle}>
                {text}
              </div>
            }
          },
          {
            title: '变量值',
            dataIndex: 'attr_value',
            key: 'attr_value',
            align: 'center',
            render: (text) =>{
              return <div className={styles.valueStyle}>
                {text}
              </div>
            }
          },
          {
            title: '说明',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            render: (text) =>{
              return <div className={styles.valueStyle}>
                {text}
              </div>
            }
          }
        ]}

2.使用css属性设定包装盒子的宽以及折行显示。

.valueStyle{
    width: 234px;
    text-align: center;
    white-space:'pre-wrap';
}

效果如下

2022年10月27日补充

七、'destroyInactiveTabPane' tabs切换时销毁其他tabs栏内容

最近开发时遇到一个问题，就是tabs切换时，当页的定时器无法销毁，因为切换以后执行的函数是执行在切换后的页面的，而且用ref无法获取到对应的子组件的函数，也有可能是因为博主太菜，但我想到一个方法，就是销毁tabs。这就用到了“destroyInactiveTabPane”属性，这个属性在官网上并没有提供，因为影响性能。所以在万不得已的情况下才会去使用。

Antd中table的简单封装及render的使用

一、封装的意义

二、封装的步骤

三、render函数的使用

四、页面展示

五、完整代码

六、antd中td内容换行处理

七、'destroyInactiveTabPane' tabs切换时销毁其他tabs栏内容

猜你喜欢