ant-design / ant-motion

:bicyclist: Animate specification and components of Ant Design
http://motion.ant.design
MIT License
4.59k stars 358 forks source link

使用ListSort 拖动排序 调用堆栈大小溢出 #179

Closed sjcUD closed 6 years ago

sjcUD commented 6 years ago
const dataArray = [
        {
          icon: 'smile-o',
          color: '#FF5500',
          title: '自由',
          id: '1001'
        },
        {
          icon: 'smile-o',
          color: '#5FC296',
          title: '平等',
          id: '1002'
        },
        {
          icon: 'smile-o',
          color: '#2DB7F5',
          title: '公正',
          id: '1003'
        },
]

 const childrenToRender = dataArray.map((item) => {
      const {icon, color, title, id} = item;
      return (
        <div key={id} className={`${this.props.className}-list`}>
          <div className={`${this.props.className}-icon`}>
            <Icon type={icon} style={{color}}/>
          </div>
          <div className={`${this.props.className}-text`}>
            <h1>{title}</h1>
          </div>
        </div>
      );
    });
<ListSort
    dragClassName = "list-drag-selected"
    appearAnim = {{animConfig: {marginTop: [5, 30], opacity: [1, 0]}}}

>
{childrenToRender}
</ListSort>

ListSort组件

"react": "^16.2.1", "react-dom": "^16.2.1",

1 2
ant-design-bot commented 6 years ago

Translation of this issue:


Drag Sort with ListSort Call Stack Size Overflow

Const dataArray = [         {           Icon: 'smile-o',           Color: '#FF5500',           Title: 'freedom',           Id: '1001'         },         {           Icon: 'smile-o',           Color: '#5FC296',           Title: 'Equality',           Id: '1002'         },         {           Icon: 'smile-o',           Color: '#2DB7F5',           Title: 'just',           Id: '1003'         }, ]  Const childrenToRender = dataArray.map((item) => {       Const {icon, color, title, id} = item;       Return (         <div key={id} className={${this.props.className}-list}>           <div className={${this.props.className}-icon}>             <Icon type={icon} style={{color}}/>           </div>           <div className={${this.props.className}-text`}>             

{title}

          
        
      );     }); <ListSort dragClassName = "list-drag-selected" appearAnim = {{animConfig: {marginTop: [5, 30], opacity: [1, 0]}}}

{childrenToRender} `

[ListSort component] (https://github.com/ant-design/ant-motion/blob/master/src/edit/template/components/ListSort.jsx)

1 2
jljsj33 commented 6 years ago

https://codesandbox.io/s/50qk2539mk 没什么问题啊。。。

sjcUD commented 6 years ago

可能是我这边项目包冲突了吧,解决了,用react@15.x就可以了