1

我想使用 React Grid Layout 在 React 中实现可拖动组件。当我直接在里面创建网格子时效果很好

在职的

<GridLayout
    width={1200}
    isResizable={false}
    rowHeight={this.props.rowHeight}
    className='layout border'
    useCSSTransforms={this.state.mounted}
    compactType={this.state.compactType}
    preventCollision={! this.state.compactType}
    onLayoutChange={this.onLayoutChange}
>
    {
        // this.state.layout (array) content
        // [
        //     { i: "a", x: 0, y: 0, w:1, h: 1, static: false},
        //     { i: "b", x: 1, y: 0, w:1, h: 1, static: false},
        //     { i: "c", x: 2, y: 0, w:1, h: 1, static: false},
        // ]
        this.state.layout.map
        ( layout => 

            <div key={layout.i} className={layout.static? "static cursor-pointer" : "cursor-pointer"} style={{borderRadius: "5px", backgroundColor: '#CCE1FC'}}>
                <div className='hide-button' onClick={ () => this.onPutItem(layout)}>&times;</div>
                { layout.static? 
                    (<span className="text">S - {this.state.keytextdict[layout.i]}</span>) : 
                    (<span className='text'>{this.state.keytextdict[layout.i]}</span>)
                }
            </div>
        )
    }
</GridLayout>

但是，当我尝试使用 React 组件创建网格子项时，一切正常，除了组件不再可拖动。

不工作

<GridLayout
    width={1200}
    isResizable={false}
    rowHeight={this.props.rowHeight}
    className='layout border'
    useCSSTransforms={this.state.mounted}
    compactType={this.state.compactType}
    preventCollision={! this.state.compactType}
    onLayoutChange={this.onLayoutChange}
>
    {
        this.state.layout.map
        ( layout => 
            <NodeComponent
                key={layout.i}
                text={this.state.keytextdict[layout.i]}
                data={layout}
                onPutItem={this.onPutItem}
            >
            </NodeComponent>
        )
    }

</GridLayout>

节点组件类

class NodeComponent extends Component {
    constructor(props) {
        super(props);
    }


    render() {
        return (
            <div 
            className={this.props.className + ' cursor-pointer'}
            style= {Object.assign({}, this.props.style, {backgroundColor: '#FFC107'})}
            >
                <div className='hide-button' onClick={ () => { this.props.onPutItem(this.props.data) }}>&times;</div>
                <span className="text">{this.props.text}</span>
                {this.props.children}
            </div>
        )
    }

    nodeComponentOnDelete = () => {
        this.props.onPutItem(this.props.grid);
    }
}

export default NodeComponent

有谁知道如何在中创建 React 组件作为网格子项？

4

0 回答 0