Question

我正在尝试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} />
        ))}
      </>
    )
  }
}

Player.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和BetweenSelection正常运行，至少可以通过console.log。

Answer 1

需要更改变量名称，它们是Player.js中的In [5]: subprocess.check_output("lsl -l", shell=True,stderr=subprocess.STDOUT) --------------------------------------------------------------------------- CalledProcessError Traceback (most recent call last) <ipython-input-5-8dd15c76eb0f> in <module> ----> 1 subprocess.check_output("lsl -l", shell=True,stderr=subprocess.STDOUT) /usr/lib/python3.5/subprocess.py in check_output(timeout, *popenargs, **kwargs) 624 625 return run(*popenargs, stdout=PIPE, timeout=timeout, check=True, --> 626 **kwargs).stdout 627 628 /usr/lib/python3.5/subprocess.py in run(input, timeout, check, *popenargs, **kwargs) 706 if check and retcode: 707 raise CalledProcessError(retcode, process.args, --> 708 output=stdout, stderr=stderr) 709 return CompletedProcess(process.args, retcode, stdout, stderr) 710 CalledProcessError: Command 'lsl -l' returned non-zero exit status 127和isSelected

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

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

isSelecting

Answer 2

我将首先执行与示例中相同的操作。我看到了示例和您的代码之间的一些区别。

例如：

您导出播放器（导出默认的createSelectable（Player）），但是您不使用createSelectabletable在List类中重新创建它。

您不见了：

import { createSelectable } from 'react-selectable-fast'    


const PlayerComponent = createSelectable(Player)

export default class List extends Component {
    render() {

也许您将其包含在较高的组件中，但这是我从您共享的内容中得到的全部。

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

2 个答案: