基本的反应可选快速示例不起作用答案

【问题标题】：Basic react-selectable-fast example not working基本的反应可选快速示例不起作用
【发布时间】：2020-02-06 17:44:50
【问题描述】：

我正在尝试replicate this example。它不会以某种方式工作。从层次结构中较高的组件到较低的组件，我有三个文件：

index.js：

import React, { Component } from "react"
import { SelectableGroup } from "react-selectable-fast"
import List from "../components/List"

const items = [
  {
    player: "Dirk Nowitzki",
    year: 1999,
  },
  {
    player: "Magic Johnson",
    year: 1980,
  },
  {
    player: "Michael Jordan",
    year: 1990,
  },
]

const IndexPage = () => (
  <SelectableGroup
    className="main"
    clickClassName="tick"
    // enableDeselect
    // tolerance={this.state.tolerance}
    // globalMouse={this.state.isGlobal}
    // allowClickWithoutSelected={false}
    // duringSelection={this.handleSelecting}
    duringSelection={() => {
      console.log("DURING")
    }}
    // onSelectionClear={this.handleSelectionClear}
    onSelectionFinish={() => {
      console.log("FINISH")
    }}
  >
    <List items={items} />
  </SelectableGroup>
)

export default IndexPage

List.js

import React, { Component } from "react"
import SelectableComponent from "./Film"

export default class List extends Component {
  render() {
    console.log(this.props.items)
    return (
      <>
        {this.props.items.map((item, i) => (
          <SelectableComponent key={i} player={item.player} year={item.year} />
        ))}
      </>
    )
  }
}

播放器.js

import React from "react"
import { createSelectable } from "react-selectable-fast"

const Player = ({ selectableRef, selected, selecting }) => (
  <div
    ref={selectableRef}
    style={{
      border: "1px solid blue",
      width: "300px",
      height: "300px",
      float: "left",
    }}
    className="tick"
  >
    {console.log(selected)}
    {console.log(selecting)}
  </div>
)

export default createSelectable(Player)

它不会抛出任何错误，但Player.js 中的console.log 始终未定义。 OnSelectionFinish 和 duringSelection 工作正常，至少 console.log 正在通过。

【问题讨论】：

可以分享到代码沙箱吗？

标签： javascript reactjs higher-order-functions higher-order-components

【解决方案1】：

需要更改变量名称，它们是 Player.js 中的 isSelected 和 isSelecting

一个好的经验法则是在调试时打印整个 props 对象。

更多代码可以在图书馆的github 页面上找到。

import React from 'react'
import { TSelectableItemProps, createSelectable } from 'react-selectable-fast'

class SomeComponent extends Component<TSelectableItemProps> {
  render() {
    const { selectableRef, isSelected, isSelecting } = this.props

    return <div ref={selectableRef}>...</div>
  }
}

export default createSelectable(SomeComponent)

【讨论】：