---
title: 文件列表组件
order: 1
docGenIncludes:
  - src/components/YwFile/index.tsx
---

纯样式组件，建议和Upload一起使用

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwTitle, YwButton, AddIcon, YwFile } from '@ywfe/yw-design';
import {Upload} from 'antd'
import 'antd/dist/antd.css';
const uploadProps = {
  action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
  onChange({ file, fileList }) {
    if (file.status !== "uploading") {
      console.log(file, fileList);
    }
  },
  defaultFileList: [
    {
      uid: "1",
      status: "uploading",
      response: "Server Error 500", // custom error message to show
      url: "http://www.baidu.com/xxx.png1",
    },
    {
      uid: "2",
      name: "超长文本测试超长文本测试.doc",
      status: "done",
      url: "http://www.baidu.com/yyy.jpg",
    },
    {
      uid: "3",
      name: "zzz.png",
      status: "error",
      response: "Server Error 500", // custom error message to show
      url: "http://www.baidu.com/zzz.png",
    },
  ],

  onPreview: (file) => {
    console.log(file);
    window.open(file.url);
  },
  showUploadList: true,
};
class App extends Component {
  render() {
    return (
      <div>
        <YwTitle size="m" text="通用文件样式" />
        <Upload
          {...uploadProps}
          itemRender={(originNode, file, fileList, actions) => {
            return <YwFile {...file} fileList={fileList} actions={actions} />;
          }}
        >
          <YwButton
            type="primary"
            style={{ marginBottom: "6px" }} 
            leftIcon={<AddIcon />}
            btnText='上传附件'
          />
        </Upload>
        <YwTitle size="m" text="图片样式" />
        <span>待开发</span>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```