从功能子组件访问数组

Question

我已使用此反应库https://github.com/bokuweb/react-sortable-pane

建立了可排序列表

它接受一个数组和一个函数。 checkOrder函数会触发onDragStop。在此函数中，我想查看数组的顺序（rankChoiceArray）

const RankChoiceQuestions = props => {
  const { rankChoiceArray, checkOrder } = props
  return (
    <ItemContainer>
      <SortablePane direction="vertical" onDragStop={() => checkOrder(rankChoiceArray)}>
        {rankChoiceArray
          .sort(() => Math.random() - 0.5)
          .map(questionChoice => {
            return (
              <Pane
                className="item"
                key={questionChoice.id}
                defaultSize={{ width: 270, height: 60 }}
                resizable={{ x: false, y: false, xy: false }}
              >
                {questionChoice.text}
                {console.log('this', this)}
              </Pane>
            )
          })}
      </SortablePane>
    </ItemContainer>
  )
}

该组件会馈入另一个组件（兄弟姐妹？）

const Question = props => {
  let rankChoice
  switch (props.data.type) {
    case 'rankChoice':
      rankChoice = (
        <RankChoiceQuestions rankChoiceArray={props.data.choices} checkOrder={props.checkOrder} />
      )
      break

    default:
      responses = <div>Error: no question type: `{props.data.type}`</div>
  }
  const { data } = props
  return (
    <AnimatedDiv key={data.id}>
      <QuestionText>{data.text}</QuestionText>
      {rankChoice}
    </AnimatedDiv>
  )
}

然后所有内容最终都插入到基于父类的组件中

this.state = { order: [] }
<Question
          data={questions.find(q => q.id === currentQuestionId)}
          checkOrder={this.test}
        />

如何获取阵列道具？

test = () => {
    this.setState(state => ({
      order: state.order,
    }))
    console.log('event fired', this)
  }