react-selectable-fast基础示例无法正常工作问题求助

我帮你排查了代码里的几个关键问题，应该能解决你遇到的selected和selecting始终是undefined的情况：

1. 先修正组件导入的低级错误 #

看你的List.js里写的是：

import SelectableComponent from "./Film"

但你的可选择组件实际是Player.js啊！这个路径错误会导致你渲染的根本不是被createSelectable包装后的组件，自然接收不到注入的selected和selecting props。赶紧改成：

import SelectableComponent from "./Player"

2. 检查函数组件的兼容性（针对旧版本库） #

有些早期版本的react-selectable-fast对函数组件的支持不够完善，如果你用的不是最新版，可以试试把Player改成类组件形式：

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

class Player extends Component {
  render() {
    const { selectableRef, selected, selecting, player, year } = this.props
    console.log(selected, selecting)
    return (
      <div
        ref={selectableRef}
        style={{ 
          border: selected ? "1px solid red" : "1px solid blue", 
          width: "300px", 
          height: "300px", 
          float: "left"
        }}
      >
        {player} - {year}
      </div>
    )
  }
}

export default createSelectable(Player)

3. 避免className冲突干扰状态判断 #

你在SelectableGroup里设置了clickClassName="tick"，同时Player组件的div也硬加了className="tick"。这个clickClassName是组件被点击时库自动添加的类名，提前加上会干扰组件的状态识别逻辑，建议移除Player组件里的这个className，或者换个不同的名称。

4. 确保使用最新版本的库 #

如果上面的方法都不行，试试更新到最新版的react-selectable-fast，新版本对函数组件的支持更完善：

npm install react-selectable-fast@latest

按上面的步骤修复后，selected和selecting应该就能正常拿到布尔值了，你可以根据这两个状态给组件加选中/选中中的样式反馈~

内容的提问来源于stack exchange，提问作者R. Kohlisch