Question

我正在尝试将道具从一个组件传递到另一个组件。 index中的SortableSectionList属性似乎似乎没有传递给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。

组件在调用const时不将props传递给同一文件中的其他组件

1 个答案: