Jestem nowy w reakcja i próbuję wdrożyć ten przykład: https://reaget-selecable-fast.Now.sh/ Nie mogłem udać się, ponieważ nie mogę rozwiązać tego błędu: TypeError: Nie można odczytać właściwości "GetClientrcts" z NULL.

To jest mój kod:

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)

Próbowałem również usunąć node_modules i pakiet-lock.json , a następnie wykonany NPM Zainstaluj , ale w ogóle nie działało. Nie wiem, czy błąd jest z mojego kodu, ponieważ nie ma odniesienia do moich plików JSX / JSS. Zauważyłem, że mam 3 błędy (dla każdego obiektów w tablicy danych). Wszelka pomoc byłaby doceniona.

Zrzuty ekranu błędu: Obraz błędu (1)

Error Image(2)

Z góry dziękuję i baw się dobrze!

0
Cosmin 25 luty 2021, 11:49

1 odpowiedź

Najlepsza odpowiedź

Rozwiązałem go. Problem był w SomeComponent.jsx.

Rozwiązanie:

  1. Kasować

    export default createSelectable(SomeComponent)
    
  2. I zmienić

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

    export const SomeComponent = ({ selectableRef, isSelected, isSelecting }) => (
    
0
Cosmin 25 luty 2021, 13:27