Javascript 组件在调用as const时未将道具传递给同一文件中的其他组件

我试图将道具从一个组件传递到另一个组件。但是，

SortableSection列表中的
index
属性似乎没有传递给
SortableSection
。请参阅下面的控制台输出

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

其他属性，如
menusecoction
可以很好地通过。请参阅下面的完整代码。感谢您的帮助，谢谢

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

从“React”导入React
从“/MenuSection”导入菜单操作
从“react-sortable hoc”导入{SortableContainer，SortableElement}
类MenuSections扩展了React.Component{
render（）{
const menuSections=this.props.menuSections
const SortableSectionList=SortableContainer（{menuSections，onSectionSortEnd}）=>(
{menuSections.map（函数（menuSection，index）{
log（'SortableSectionList中的索引：'+索引）
返回(
)
})}
))
const SortableSection=SortableElement（{menusAction，index，menuItems，onSortEnd}）=>{
console.log（'SortableSection中的索引：'+索引）
返回(
)
})
返回(
)
}
}
导出默认菜单选项
似乎
react sortable hoc
自己使用。因此，如果您还想使用它，最好添加另一个属性，如
sortIndex
或类似属性并传递它

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

返回(
嘿，渲染中似乎有太多的东西（）方法。我建议您将它们分为组件方法，甚至是新的单独组件。谢谢，我会尝试一下，看看它是如何进行的，并相应地更新问题。代码段中没有出现错误。您仍然面临这个问题吗？为什么要定义
SortableSectionList
和
SortableSection
inside of
MenuSections
render方法？是的，就是这样，谢谢！也感谢示例链接。