fix: lint:demo

2025-01-18 14:13:37 +08:00 · 2019-08-02 18:19:06 +08:00 · 2019-08-02 18:19:06 +08:00 · 872ada07e7
commit 872ada07e7
parent ac3f319ad2
23 changed files with 125 additions and 80 deletions
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@ -46,7 +46,11 @@ class App extends React.Component {

        <Card
          style={{ width: 300, marginTop: 16 }}
-          actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
+          actions={[
+            <Icon type="setting" key="setting" />,
+            <Icon type="edit" key="edit" />,
+            <Icon type="ellipsis" key="ellipsis" />,
+          ]}
        >
          <Skeleton loading={loading} avatar active>
            <Meta
--- a/components/card/demo/meta.md
+++ b/components/card/demo/meta.md
@ -27,7 +27,11 @@ ReactDOM.render(
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    }
-    actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
+    actions={[
+      <Icon type="setting" key="setting" />,
+      <Icon type="edit" key="edit" />,
+      <Icon type="ellipsis" key="ellipsis" />,
+    ]}
  >
    <Meta
      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
--- a/components/comment/demo/basic.md
+++ b/components/comment/demo/basic.md
@ -44,7 +44,7 @@ class App extends React.Component {
    const { likes, dislikes, action } = this.state;

    const actions = [
-      <span>
+      <span key="comment-basic-like">
        <Tooltip title="Like">
          <Icon
            type="like"
@ -54,7 +54,7 @@ class App extends React.Component {
        </Tooltip>
        <span style={{ paddingLeft: 8, cursor: 'auto' }}>{likes}</span>
      </span>,
-      <span>
+      <span key=' key="comment-basic-dislike"'>
        <Tooltip title="Dislike">
          <Icon
            type="dislike"
@ -64,7 +64,7 @@ class App extends React.Component {
        </Tooltip>
        <span style={{ paddingLeft: 8, cursor: 'auto' }}>{dislikes}</span>
      </span>,
-      <span>Reply to</span>,
+      <span key="comment-basic-reply-to">Reply to</span>,
    ];

    return (
--- a/components/comment/demo/list.md
+++ b/components/comment/demo/list.md
@ -19,7 +19,7 @@ import moment from 'moment';

 const data = [
  {
-    actions: [<span>Reply to</span>],
+    actions: [<span key="comment-list-reply-to-0">Reply to</span>],
    author: 'Han Solo',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    content: (
@ -44,7 +44,7 @@ const data = [
    ),
  },
  {
-    actions: [<span>Reply to</span>],
+    actions: [<span key="comment-list-reply-to-0">Reply to</span>],
    author: 'Han Solo',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    content: (
--- a/components/comment/demo/nested.md
+++ b/components/comment/demo/nested.md
@ -18,7 +18,7 @@ import { Comment, Avatar } from 'antd';

 const ExampleComment = ({ children }) => (
  <Comment
-    actions={[<span>Reply to</span>]}
+    actions={[<span key="comment-nested-reply-to">Reply to</span>]}
    author={<a>Han Solo</a>}
    avatar={
      <Avatar
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@ -75,7 +75,14 @@ class App extends React.Component {
          ]}
          bordered
          renderItem={item => (
-            <List.Item key={item.id} actions={[<a onClick={this.showDrawer}>View Profile</a>]}>
+            <List.Item
+              key={item.id}
+              actions={[
+                <a onClick={this.showDrawer} key={`a-${item.id}`}>
+                  View Profile
+                </a>,
+              ]}
+            >
              <List.Item.Meta
                avatar={
                  <Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
--- a/components/list/demo/loadmore.md
+++ b/components/list/demo/loadmore.md
@ -98,7 +98,9 @@ class LoadMoreList extends React.Component {
        loadMore={loadMore}
        dataSource={list}
        renderItem={item => (
-          <List.Item actions={[<a>edit</a>, <a>more</a>]}>
+          <List.Item
+            actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
+          >
            <Skeleton avatar title={false} loading={item.loading} active>
              <List.Item.Meta
                avatar={
--- a/components/list/demo/vertical.md
+++ b/components/list/demo/vertical.md
@ -56,9 +56,9 @@ ReactDOM.render(
      <List.Item
        key={item.title}
        actions={[
-          <IconText type="star-o" text="156" />,
-          <IconText type="like-o" text="156" />,
-          <IconText type="message" text="2" />,
+          <IconText type="star-o" text="156" key="list-vertical-star-o" />,
+          <IconText type="like-o" text="156" key="list-vertical-like-o" />,
+          <IconText type="message" text="2" key="list-vertical-message" />,
        ]}
        extra={
          <img
--- a/components/mention/demo/avatar.md
+++ b/components/mention/demo/avatar.md
@ -54,7 +54,12 @@ class CustomNavMention extends React.Component {
      item => item.name.toLowerCase().indexOf(searchValue) !== -1,
    );
    const suggestions = filtered.map(suggestion => (
-      <Nav value={suggestion.name} data={suggestion} disabled={suggestion.disabled}>
+      <Nav
+        value={suggestion.name}
+        data={suggestion}
+        disabled={suggestion.disabled}
+        key="mention-avatar"
+      >
        <Avatar
          src={suggestion.icon}
          size="small"
--- a/components/mention/demo/custom-tag.md
+++ b/components/mention/demo/custom-tag.md
@ -43,7 +43,7 @@ class CustomNavMention extends React.Component {
      item => item.name.toLowerCase().indexOf(searchValue) !== -1,
    );
    const suggestions = filtered.map(suggestion => (
-      <Nav value={suggestion.name} data={suggestion}>
+      <Nav value={suggestion.name} data={suggestion} key={suggestion.name}>
        <span>
          {suggestion.name} - {suggestion.type}
        </span>
--- a/components/skeleton/demo/list.md
+++ b/components/skeleton/demo/list.md
@ -61,9 +61,9 @@ class App extends React.Component {
              key={item.title}
              actions={
                !loading && [
-                  <IconText type="star-o" text="156" />,
-                  <IconText type="like-o" text="156" />,
-                  <IconText type="message" text="2" />,
+                  <IconText type="star-o" text="156" key="skeleton-star-o" />,
+                  <IconText type="like-o" text="156" key="skeleton-like-o" />,
+                  <IconText type="message" text="2" key="skeleton-message" />,
                ]
              }
              extra={
--- a/components/table/demo/basic.md
+++ b/components/table/demo/basic.md
@ -16,12 +16,36 @@ Simple table with actions.
 ```jsx
 import { Table, Divider, Tag } from 'antd';

+const nameRender = text => <a href="javascript:;">{text}</a>;
+const tagsRender = tags => (
+  <span>
+    {tags.map(tag => {
+      let color = tag.length > 5 ? 'geekblue' : 'green';
+      if (tag === 'loser') {
+        color = 'volcano';
+      }
+      return (
+        <Tag color={color} key={tag}>
+          {tag.toUpperCase()}
+        </Tag>
+      );
+    })}
+  </span>
+);
+const actionRender = (text, record) => (
+  <span>
+    <a href="javascript:;">Invite {record.name}</a>
+    <Divider type="vertical" />
+    <a href="javascript:;">Delete</a>
+  </span>
+);
+
 const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
-    render: text => <a href="javascript:;">{text}</a>,
+    render: nameRender,
  },
  {
    title: 'Age',
@ -37,32 +61,12 @@ const columns = [
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
-    render: tags => (
-      <span>
-        {tags.map(tag => {
-          let color = tag.length > 5 ? 'geekblue' : 'green';
-          if (tag === 'loser') {
-            color = 'volcano';
-          }
-          return (
-            <Tag color={color} key={tag}>
-              {tag.toUpperCase()}
-            </Tag>
-          );
-        })}
-      </span>
-    ),
+    render: tagsRender,
  },
  {
    title: 'Action',
    key: 'action',
-    render: (text, record) => (
-      <span>
-        <a href="javascript:;">Invite {record.name}</a>
-        <Divider type="vertical" />
-        <a href="javascript:;">Delete</a>
-      </span>
-    ),
+    render: actionRender,
  },
 ];

--- a/components/table/demo/bordered.md
+++ b/components/table/demo/bordered.md
@ -16,11 +16,13 @@ Add border, title and footer for table.
 ```jsx
 import { Table } from 'antd';

+const nameRender = text => <a href="javascript:;">{text}</a>;
+
 const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
-    render: text => <a href="javascript:;">{text}</a>,
+    render: nameRender,
  },
  {
    title: 'Cash Assets',
--- a/components/table/demo/dynamic-settings.md
+++ b/components/table/demo/dynamic-settings.md
@ -18,13 +18,26 @@ import { Table, Icon, Switch, Radio, Form, Divider } from 'antd';

 const FormItem = Form.Item;

+const nameRender = text => <a href="javascript:;">{text}</a>;
+const actionRender = (text, record) => (
+  <span>
+    <a href="javascript:;">Action 一 {record.name}</a>
+    <Divider type="vertical" />
+    <a href="javascript:;">Delete</a>
+    <Divider type="vertical" />
+    <a href="javascript:;" className="ant-dropdown-link">
+      More actions <Icon type="down" />
+    </a>
+  </span>
+);
+
 const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 150,
-    render: text => <a href="javascript:;">{text}</a>,
+    render: nameRender,
  },
  {
    title: 'Age',
@ -41,17 +54,7 @@ const columns = [
    title: 'Action',
    key: 'action',
    width: 360,
-    render: (text, record) => (
-      <span>
-        <a href="javascript:;">Action 一 {record.name}</a>
-        <Divider type="vertical" />
-        <a href="javascript:;">Delete</a>
-        <Divider type="vertical" />
-        <a href="javascript:;" className="ant-dropdown-link">
-          More actions <Icon type="down" />
-        </a>
-      </span>
-    ),
+    render: actionRender,
  },
 ];

--- a/components/table/demo/expand.md
+++ b/components/table/demo/expand.md
@ -16,6 +16,8 @@ When there's too much information to show and the table can't display all at onc
 ```jsx
 import { Table } from 'antd';

+const actionRender = () => <a href="javascript:;">Delete</a>;
+
 const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
@ -24,7 +26,7 @@ const columns = [
    title: 'Action',
    dataIndex: '',
    key: 'x',
-    render: () => <a href="javascript:;">Delete</a>,
+    render: actionRender,
  },
 ];

--- a/components/table/demo/fixed-columns-header.md
+++ b/components/table/demo/fixed-columns-header.md
@ -24,6 +24,8 @@ A Solution for displaying large amounts of data with long columns.
 ```jsx
 import { Table } from 'antd';

+const actionRender = () => <a href="javascript:;">action</a>;
+
 const columns = [
  {
    title: 'Full Name',
@ -87,7 +89,7 @@ const columns = [
    key: 'operation',
    fixed: 'right',
    width: 100,
-    render: () => <a href="javascript:;">action</a>,
+    render: actionRender,
  },
 ];

--- a/components/table/demo/fixed-columns.md
+++ b/components/table/demo/fixed-columns.md
@ -24,6 +24,8 @@ To fix some columns and scroll inside other columns, and you must set `scroll.x`
 ```jsx
 import { Table } from 'antd';

+const actionRender = () => <a href="javascript:;">action</a>;
+
 const columns = [
  {
    title: 'Full Name',
@ -52,7 +54,7 @@ const columns = [
    key: 'operation',
    fixed: 'right',
    width: 100,
-    render: () => <a href="javascript:;">action</a>,
+    render: actionRender,
  },
 ];

--- a/components/table/demo/nested-table.md
+++ b/components/table/demo/nested-table.md
@ -23,6 +23,25 @@ const menu = (
  </Menu>
 );

+const statusRender = () => (
+  <span>
+    <Badge status="success" />
+    Finished
+  </span>
+);
+const operationRender = () => (
+  <span className="table-operation">
+    <a href="javascript:;">Pause</a>
+    <a href="javascript:;">Stop</a>
+    <Dropdown overlay={menu}>
+      <a href="javascript:;">
+        More <Icon type="down" />
+      </a>
+    </Dropdown>
+  </span>
+);
+const actionRender = () => <a href="javascript:;">Publish</a>;
+
 function NestedTable() {
  const expandedRowRender = () => {
    const columns = [
@ -31,29 +50,14 @@ function NestedTable() {
      {
        title: 'Status',
        key: 'state',
-        render: () => (
-          <span>
-            <Badge status="success" />
-            Finished
-          </span>
-        ),
+        render: statusRender,
      },
      { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
      {
        title: 'Action',
        dataIndex: 'operation',
        key: 'operation',
-        render: () => (
-          <span className="table-operation">
-            <a href="javascript:;">Pause</a>
-            <a href="javascript:;">Stop</a>
-            <Dropdown overlay={menu}>
-              <a href="javascript:;">
-                More <Icon type="down" />
-              </a>
-            </Dropdown>
-          </span>
-        ),
+        render: operationRender,
      },
    ];

@ -76,7 +80,7 @@ function NestedTable() {
    { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
    { title: 'Creator', dataIndex: 'creator', key: 'creator' },
    { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
-    { title: 'Action', key: 'operation', render: () => <a href="javascript:;">Publish</a> },
+    { title: 'Action', key: 'operation', render: actionRender },
  ];

  const data = [];
--- a/components/table/demo/row-selection.md
+++ b/components/table/demo/row-selection.md
@ -20,11 +20,13 @@ Rows can be selectable by making first column as a selectable column.
 ```jsx
 import { Table } from 'antd';

+const nameRender = text => <a href="javascript:;">{text}</a>;
+
 const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
-    render: text => <a href="javascript:;">{text}</a>,
+    render: nameRender,
  },
  {
    title: 'Age',
--- a/components/transfer/demo/table-transfer.md
+++ b/components/transfer/demo/table-transfer.md
@ -81,6 +81,8 @@ for (let i = 0; i < 20; i++) {

 const originTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);

+const tagRender = tag => <Tag>{tag}</Tag>;
+
 const leftTableColumns = [
  {
    dataIndex: 'title',
@ -89,7 +91,7 @@ const leftTableColumns = [
  {
    dataIndex: 'tag',
    title: 'Tag',
-    render: tag => <Tag>{tag}</Tag>,
+    render: tagRender,
  },
  {
    dataIndex: 'description',
--- a/components/transfer/demo/tree-transfer.md
+++ b/components/transfer/demo/tree-transfer.md
@ -25,7 +25,7 @@ const isChecked = (selectedKeys, eventKey) => {

 const generateTree = (treeNodes = [], checkedKeys = []) => {
  return treeNodes.map(({ children, ...props }) => (
-    <TreeNode {...props} disabled={checkedKeys.includes(props.key)}>
+    <TreeNode {...props} disabled={checkedKeys.includes(props.key)} key={props.key}>
      {generateTree(children, checkedKeys)}
    </TreeNode>
  ));
--- a/components/tree/demo/basic-controlled.md
+++ b/components/tree/demo/basic-controlled.md
@ -99,7 +99,7 @@ class Demo extends React.Component {
          </TreeNode>
        );
      }
-      return <TreeNode {...item} />;
+      return <TreeNode key={item.key} {...item} />;
    });

  render() {
--- a/components/tree/demo/dynamic.md
+++ b/components/tree/demo/dynamic.md
@ -54,7 +54,7 @@ class Demo extends React.Component {
          </TreeNode>
        );
      }
-      return <TreeNode {...item} dataRef={item} />;
+      return <TreeNode key={item.key} {...item} dataRef={item} />;
    });

  render() {