cnd-components-mcp/componentData/components/Link/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 示例
```tsx
import React from 'react';
import { Button } from '@alicloud/console-components';

export default () => {
  return (
    <div>
      <Button component="a" text>
        链接内容
      </Button>
         
      <Button component="a" text disabled>
        链接内容
      </Button>
    </div>
  );
};

export const meta = {
  title: '基础链接',
  describe:
    'Button组件添加 text 属性为文字按钮,通过 component 属性 控制最终渲染的 jsx 标签标签类型为a标签。',
};

```
```tsx
import React from 'react';
import { Button } from '@alicloud/console-components';

export default () => {
  return (
    <div>
      <Button type="primary" component="a" text>
        链接内容
      </Button>
         
      <Button type="primary" component="a" text disabled>
        链接内容
      </Button>
    </div>
  );
};

export const meta = {
  title: '高亮链接',
  describe:
    'Button组件添加 text 属性为文字按钮,通过 component 属性 控制最终渲染的 jsx 标签标签类型为a标签。',
};

```
```tsx
import React, { useState } from 'react';
import { Table } from '@alicloud/console-components';
import Actions, { LinkButton } from '@alicloud/console-components-actions';

const getDataSource = () => {
  const result: any[] = [];
  for (let i = 0; i < 2; i++) {
    result.push({
      id: 100306660940 + i,
      status: i % 2 === 0 ? '运行中' : '停用',
      type: '专用网络',
      title: '可以通过 expandedRowRender 额外渲染行',
      name: '实例名称',
    });
  }
  return result;
};

const render = () => {
  return (
    &lt;Actions&gt;
      <LinkButton
        onClick={() => {
          alert('on click');
        }}
      >
        操作项
      &lt;/LinkButton&gt;
      <LinkButton
        onClick={() => {
          alert('on click');
        }}
      >
        操作项
      &lt;/LinkButton&gt;
      <LinkButton
        onClick={() => {
          alert('on click');
        }}
      >
        操作项
      &lt;/LinkButton&gt;
    &lt;/Actions&gt;
  );
};

export default () => {
  const [dataSource, setDataSource] = useState(getDataSource());

  const onFilter = (filterParams) => {
    let ds = getDataSource();
    Object.keys(filterParams).forEach((key) => {
      const { selectedKeys } = filterParams[key];
      if (selectedKeys.length) {
        ds = ds.filter((record) => {
          return selectedKeys.some((value) => {
            return record[key].indexOf(value) > -1;
          });
        });
      }
    });
    setDataSource(ds);
  };

  const renderId = (value, _index, record) => {
    const { name } = record;
    return (
      &lt;div&gt;
        &lt;a href="/"&gt;{value}&lt;/a&gt;
        &lt;div&gt;{name}&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  return (
    &lt;div&gt;
      &lt;Table onFilter={onFilter} dataSource={dataSource} hasBorder={false}&gt;
        <Table.Column
          title="实例ID/名称"
          dataIndex="id"
          width={200}
          cell={renderId}
        />
        <Table.Column
          filters={[
            {
              label: '运行中',
              value: '运行中',
            },
            {
              label: '停用',
              value: '停用',
            },
          ]}
          title="状态"
          dataIndex="status"
        />
        &lt;Table.Column title="网络类型" dataIndex="type" /&gt;
        &lt;Table.Column title="操作" cell={render} width={200} /&gt;
      &lt;/Table&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '常用场景',
  describe: '表格场景内使用',
};

```