如何解决类型错误:无法读取 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
。
解决方案:
-
删除
export default createSelectable(SomeComponent)
-
和改变
const SomeComponent = ({ selectableRef,isSelected,isSelecting }) => (
-
进入
export const SomeComponent = ({ selectableRef,isSelecting }) => (
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。