組件沒有傳遞道具到同一文件中的其他組件時調用爲const

Question

我想從道具從一個組件傳遞到另一個。但SortableSectionList中的index屬性似乎並未傳遞給SortableSection。見下面的控制檯輸出。

Index in SortableSectionList: 0 
Index in SortableSectionList: 1 
(2) Index in SortableSection: undefined 

其他屬性如menuSection只能通過罰款。請參閱下面的完整代碼。任何幫助表示讚賞，謝謝！

import React from 'react' 
import MenuSection from './MenuSection' 
import { SortableContainer, SortableElement } from 'react-sortable-hoc' 

class MenuSections extends React.Component { 
    render() { 
    const menuSections = this.props.menuSections 

    const SortableSectionList = SortableContainer(({ menuSections, onSectionSortEnd }) => (
     <div> 
     {menuSections.map(function(menuSection, index) { 
      console.log('Index in SortableSectionList: ' + index) 
      return (
      <SortableSection 
       collection="section" 
       key={`item-${menuSection.id}`} 
       menuSection={menuSection} 
       index={index} 
       menuItems={menuSection.menuItems} 
       onSortEnd={onSectionSortEnd} 
      /> 
     ) 
     })} 
     </div> 
    )) 

    const SortableSection = SortableElement(({ menuSection, index, menuItems, onSortEnd }) => { 
     console.log('Index in SortableSection: '+index) 

     return (
     <MenuSection 
      key={menuSection.id} 
      menuSection={menuSection} 
      index={index} 
      menuItems={menuItems} 
      onSortEnd={onSortEnd} 
     /> 
    ) 
    }) 

    return (
     <div> 
     <SortableSectionList 
      menuSections={this.props.menuSections} 
      lockAxis="y" 
      lockToContainerEdges 
      onSortEnd={this.props.onSortEnd} 
      onSectionSortEnd={this.props.onSectionSortEnd} 
     /> 
     </div> 
    ) 
    } 
} 

export default MenuSections 

Answer 1

似乎react-sortable-hoc本身使用index property。所以，如果你想使用它，你最好添加另一個屬性，如sortIndex或類似的，並通過它。

return (
    <SortableSection 
    index={index} 
    sortIndex={index} 
    ... 

他們在文檔中也有explanation and example。