类型错误：无法读取 null 的属性“getClientRects”

问题描述

我是 React 的新手，我正在尝试实现这个示例：https://react-selectable-fast.now.sh/ 我无法让它工作，因为我无法解决这个错误：TypeError：无法读取 null 的属性 'getClientRects'。

这是我的代码：

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <App items={[{player: "Dirk Nowitzki",year: 1999},{player: "Magic Johnson",year: 1980},{player: "Michael Jordan",year: 1990}]}/>,document.getElementById('root')
);

// If you want to start measuring performance in your app,pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

App.jsx

import React,{ Component } from 'react'
import { SelectableGroup } from 'react-selectable-fast'
import { createSelectable,SelectAll,deselectAll } from 'react-selectable-fast'
import SomeComponent from './SomeComponent'

const SelectableComponent = createSelectable(SomeComponent)

class App extends Component {
    handleSelecting() {
        console.log("selecting");
    }

    handleSelectionClear() {
        console.log("selection clear");
    }

    handleSelectionFinish() {
        console.log("selection finish");
    }

    render() {
        return (
            <SelectableGroup
                className="main"
                clickClassName="tick"
                enabledeselect
                /*tolerance={this.state.tolerance}
                globalMouse={this.state.isGlobal}*/
                allowClickWithoutSelected={false}
                duringSelection={this.handleSelecting}
                onSelectionClear={this.handleSelectionClear}
                onSelectionFinish={this.handleSelectionFinish}
                ignoreList={['.not-selectable','.item:nth-child(10)','.item:nth-child(27)']}
            >
                <List items={this.props.items} />
            </SelectableGroup>
        )
    }
}

class List extends Component {
    render() {
        this.props.items.map((item,i) => {
            console.log(item.player,item.year,i);
        })
        return (
            <div>
                <SelectAll className="selectable-button">
                    <button>Select all</button>
                </SelectAll>
                <deselectAll className="selectable-button">
                    <button>Clear selection</button>
                </deselectAll>
                {this.props.items.map((item,i) => (
                    <SelectableComponent
                        key={i}
                        player={item.player}
                        year={item.year}
                    />
                ))}
            </div>
        )
    }
}

export default App;

SomeComponent.jsx

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

const SomeComponent = ({ selectableRef,isSelected,isSelecting }) => (
    <div ref={selectableRef} style={{
        border: "1px solid blue",width: "300px",height: "300px",float: "left",}}
         className="tick">...</div>
)

export default createSelectable(SomeComponent)

我也尝试删除node_modules和package-lock.json，然后制作npm install，但根本不起作用。我不知道错误是否来自我的代码，因为它没有引用我的 jsx/js 文件。我注意到我有 3 个错误（对于数据数组中的每个对象）。任何帮助将不胜感激。

错误截图：

提前致谢，祝您有美好的一天！

解决方法

我解决了。问题出在 SomeComponent.jsx。

解决方案：

1. 删除

   export default createSelectable(SomeComponent)
   

2. 和改变

   const SomeComponent = ({ selectableRef,isSelected,isSelecting }) => (
   

3. 进入

   export const SomeComponent = ({ selectableRef,isSelecting }) => (