Пакет, перетаскиваемый в React Component - PullRequest
Новая
       42

Пакет, перетаскиваемый в React Component

0 голосов
/ 11 января 2019

Я создаю инструмент заказа сетки продуктов для веб-сайта электронной коммерции. Это позволяет мерчендайзеру изменять порядок отображения товаров.

Это достигается с помощью перетаскивания суперспособностей Packery Дэвида Десандро https://packery.metafizzy.co/

Кажется, есть два способа сделать это. Либо запустите его код (с помощью jQuery) в componentDidMount () {}; или найдите React-версию Packery, например https://www.npmjs.com/package/react-packery-component. Есть несколько из них, но все они представляют аналогичную проблему. Их примеры называют объект по-разному. (У меня есть фигурные скобки). И я получаю пугающую ошибку TypeError!

TypeError: Невозможно прочитать свойство 'bool' из неопределенного 

       import React, { Component } from 'react'
    import { 
        Card, 
        CardImg, 
        CardBody,
        CardTitle, 
        Input, 
        InputGroup, 
        Container, 
        Row, 
        // Col, 
        Jumbotron 
        } from 'reactstrap';
    import Papa from 'papaparse'
    import 'bootstrap/dist/css/bootstrap.min.css'
    import './App.css'
    import Packery from 'react-packery-component'

    class App extends Component {
        constructor(props) {
            super(props);
            this.state = {data: [] };  // State holds gridorder / neworder
            this.handleChange = this.handleChange.bind(this);
            this.updateData = this.updateData.bind(this)
        }

        handleChange(event) {
            event.preventDefault()
            const inventory = event.target.files[0]
            Papa.parse(inventory, {
                header: true,
                complete: this.updateData
            })
        } // END

        updateData(results) {
            const data = results.data
            console.log(data)
            this.setState({data}) // {data:data}
        }

        renderData() {
            return  this.state.data.length > 1 
               ? this.state.data.map((item) => (  // Object in return 
                        <Card className="grid-item" key={item.sku} >
                            <CardImg src={item.image} />
                            <CardTitle> {item.sku} </CardTitle>
                            <CardBody> {item.name} </CardBody>
                        </Card>     
               )) 
               : null         
        }

        render() {
            return (
                <div>
                    <Jumbotron>
                        <form >
                            <InputGroup>
                                Name:
                                <Input type="file" onChange={this.handleChange} />
                            </InputGroup>
                        </form>
                    </Jumbotron>

                    <div className="album">                    
                        <Container>           
                             {/* This throws a TypeError. NOTE: I am calling renderData() */}
                            <Packery className="grid" > {this.renderData()} </Packery> 
                        </Container>
                    </div>
                </div>          
            );
        }
    } // END

    export default App

Причина, по которой я держу объект в состоянии , заключается в том, что это то, что изменится. gridorder in, neworder out. Заранее спасибо, потому что я, конечно, смогу воспользоваться помощью.

...