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

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

## 基本使用
```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  return (
    <div>
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
      />
      <CndResourceDisplay
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
      />
    &lt;/div&gt;
  );
};

export default Demo;
```
## 自定义 copyNameProps / copyIdProps
```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  return (
    &lt;div&gt;
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
        copyNameProps={{
          showIcon:true,
          truncateProps:{
            type: 'width',
            threshold: 200
          }
        }}
         copyIdProps={{
          showIcon:true
        }}
      />
    &lt;/div&gt;
  );
};

export default Demo;
```
## 设置跳转链接 url
```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  return (
    &lt;div&gt;
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
        url="https://cnd.alibaba.net/cnd-components/cn-instance"
      />
    &lt;/div&gt;
  );
};

export default Demo;
```
## 自定义点击事件 onClick
```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  return (
    &lt;div&gt;
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
        onClick={()=>{
          alert('点击了')
        }}
      />
    &lt;/div&gt;
  );
};

export default Demo;
```
## showLinkIcon 不需要设置点击事件(onClick)或者跳转链接(url)就可以展示链接样式
```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  return (
    &lt;div&gt;
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId="vsw-bp1xi7ad8uw66xts8m3hw"
        showLinkIcon={true}
      />
    &lt;/div&gt;
  );
};

export default Demo;
```
## 自定义资源不存在时的报错提示
```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  const vpcId = 'vpc-bp1vftj8wl2m8spfjsdqn'
  return (
    &lt;div&gt;
      <CndResourceDisplay
        resourceName="k8s-vswitch-c5ab8ae67d79b4774b3bd593cb3b4a886"
        resourceId={vpcId}
        showLinkIcon={true}
        existConfig={{
          product: 'vpc',
          action: 'DescribeVpcs',
          params: { VpcId: vpcId, RegionId: window.regionId },
          message: &lt;span&gt;test&lt;/span&gt;,
        }}
      />
    &lt;/div&gt;
  );
};

export default Demo;
```
## name不存在时查询name，并回显
```tsx preview
import React from "react";
import { CndResourceDisplay } from "@ali/cnd";

const Demo = () => {
  const vpcId = 'vpc-bp1vftj8wl2m8spfjsdqn'
  const renderFunc = (res) => {
    const { Vpcs } = res;
    let vpcItem = {};
    Array.isArray(Vpcs.Vpc) && (vpcItem = Vpcs.Vpc[0]);
    return vpcItem.VpcName;
  }
  return (
    &lt;div&gt;
      <CndResourceDisplay
        resourceId={vpcId}
        showLinkIcon={true}
        existConfig={{
          product: 'vpc',
          action: 'DescribeVpcs',
          params: { VpcId: vpcId, RegionId: window.regionId },
          message: &lt;span&gt;test&lt;/span&gt;,
        }}
        renderNameConfig={{
          display: true,
          renderFunc: renderFunc
        }}
      />
    &lt;/div&gt;
  );
};

export default Demo;
```