天道酬勤,学无止境

react-grid-layout

Converting Responsive Grid Layout to Plotly Dash

I'm a very active Dash user and I have started to find a lot of limitations in my Dash usage and I realized that the information/contents about how converting components to dash are absolutely limited, with outdated and very simple examples... And I do not have almost any knowledge in Javascript or React, I'm completely lost on how to convert a component. I'm trying to convert the Responsive Grid Layout component from react.js to Plotly Dash but I don't know how should I deal with the properties in this case? Link to the component: https://github.com/STRML/react-grid-layout/blob/master/lib

2022-04-29 17:28:29    分类:问答    javascript   reactjs   plotly-dash   react-grid-layout

如何使用 react-grid-layout 创建动态拖放布局(How to create dynamic drag and drop layout with react-grid-layout)

问题 我正在使用 react-grid-layout 来制作drag-drop and resize components ,所以我能够实现文档中提到的功能。 我的问题 我正在创建动态 UI,所以我正在用数据渲染我的 UI。 在这个库中,我需要创建这样的布局{ {i: 'a', x: 0, y: 0, w: 1, h: 2} 当我创建静态 UI 时,我能够实现我想要的。这是工作代码沙箱 在具有预定义布局的静态 Ui 中,我喜欢下面的内容。 const layout = [ { i: "a", x: 0, y: 0, w: 2, h: 1 }, { i: "b", x: 2, y: 0, w: 2, h: 1 }, { i: "c", x: 4, y: 0, w: 2, h: 1 }, { i: "d", x: 6, y: 0, w: 2, h: 1 }, { i: "e", x: 0, y: 2, w: 2, h: 1 } ]; <div className="App"> <GridLayout className="layout" layout={layout} style={{ backgroundColor: "blue" }} > {layout.map((li) => ( <div key={li.i} style={{ backgroundColor: "yellow"

2021-12-07 02:49:17    分类:技术分享    javascript   html   reactjs   grid-layout   react-grid-layout

How to create dynamic drag and drop layout with react-grid-layout

I am using react-grid-layout to make drag-drop and resize components, So i am able to achieve the functionality as mentioned in the doc. My Issue I am creating dynamic UI so I am rendering my UI with data. Here in this library I need to create layout like { {i: 'a', x: 0, y: 0, w: 1, h: 2} When I am creating static UI I am able to achieve what I want.Here is working code sandbox In static Ui with predefined layout I did like below. const layout = [ { i: "a", x: 0, y: 0, w: 2, h: 1 }, { i: "b", x: 2, y: 0, w: 2, h: 1 }, { i: "c", x: 4, y: 0, w: 2, h: 1 }, { i: "d", x: 6, y: 0, w: 2, h: 1 }, { i

2021-11-19 20:40:53    分类:问答    javascript   html   reactjs   grid-layout   react-grid-layout

ReactJS react-grid-layout 切换静态属性(ReactJS react-grid-layout toggle static property)

问题 我已经学习 React 几天了,这次我试图创建一个可拖动小部件的网格,我在 github 上找到了这个库:react-grid-layout 可以做到这一点。 这一次,我试图在单击button时切换可拖动或static属性,但这样做时遇到了一些麻烦。 这是我的App.js : import React, { Component } from 'react'; import {InputText} from 'primereact/components/inputtext/InputText'; import GridLayout from 'react-grid-layout'; import './App.css'; class App extends Component { render() { var layout = [ {i: 'a', x: 0, y: 0, w: 10, h: 4}, {i: 'b', x: 1, y: 0, w: 3, h: 2}, {i: 'c', x: 4, y: 0, w: 1, h: 2} ]; return ( <React.Fragment> <button onClick={this.toggleStatic (layout)}>Enable</button> <GridLayout className="layout"

2021-10-23 01:43:16    分类:技术分享    javascript   reactjs   draggable   react-grid-layout

ReactJS:TypeError:this.state.data.map 不是函数(ReactJS: TypeError: this.state.data.map is not a function)

问题 -有人可以帮我解决这个问题吗? 我收到此问题标题中描述的错误。 我想将 JSON 数据放在 react-grid-layout 组件中。 这个库可以在 (https://github.com/STRML/react-grid-layout) 上找到 import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import Employee from './Employee'; import "./react-grid-layout/css/styles.css"; import "./react-resizable/css/styles.css" var ReactGridLayout = require('react-grid-layout'); var data = []; class MyFirstGrid extends React.Component { constructor() { super(); this.state = { data: [] }; } componentDidMount(){ fetch("http://localhost:8080/TrainingWebMvcSpring2/roottypes/listAll.do") .then( (response

2021-10-21 17:38:36    分类:技术分享    reactjs   react-grid-layout

反应传递函数到子组件(React Pass function to child component)

问题 我想将函数传递给子组件,但出现此错误。 Invalid value for prop passedFunction on <div> tag. class Parent extends Component { passedFunction(){} render() { <Child passedFunction={this.passedFunction}/> } } class Child extends Component { render() { <div onClick={this.props.passedFunction}></div> } } 基本上就是我想要做的。 var ReactGridLayout = require('react-grid-layout'); var MyFirstGrid = React.createClass({ passedFunction:function(){} render: function () { return ( <ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}> <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>a</div> <div key=

2021-10-21 06:47:53    分类:技术分享    reactjs   react-grid-layout

react-grid-layout 示例 Unknown prop `_grid` on 标签(react-grid-layout example Unknown prop `_grid` on <div> tag)

问题 我正在尝试实现react-grid-layout 。 所有示例都通过_grid div 属性传递网格项配置: createElement(el) { ... return ( <div key={i} _grid={el}> ... </div> ); }, 在我的实现中: return ( <div key={i} _grid={el}> <DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/> <span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span> </div> ) 我收到一个错误: dashboard_view.browserify.browserified.js:1216 Warning: Unknown prop `_grid` on <div> tag. Remove this prop from the element. For details, see <URL ommitted because SO complained about URL shorteners> in div (created by DashboardLayout)

2021-10-07 20:48:25    分类:技术分享    reactjs   react-grid-layout

ReactJS react-grid-layout toggle static property

I've been learning React for a couple of days, this time I'm trying to create a grid of draggable widgets, and I found this library on github: react-grid-layout which does that. This time, I'm trying to toggle draggable or static property when clicking on a button but I'm having some troubles doing so. This is my App.js: import React, { Component } from 'react'; import {InputText} from 'primereact/components/inputtext/InputText'; import GridLayout from 'react-grid-layout'; import './App.css'; class App extends Component { render() { var layout = [ {i: 'a', x: 0, y: 0, w: 10, h: 4}, {i: 'b', x

2021-09-30 07:32:58    分类:问答    javascript   reactjs   draggable   react-grid-layout

ReactJS: TypeError: this.state.data.map is not a function

-Can someone please help me with this. I am getting an error described in the title of this question. I want to put JSON data inside react-grid-layout component. This library can be found on (https://github.com/STRML/react-grid-layout) import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import Employee from './Employee'; import "./react-grid-layout/css/styles.css"; import "./react-resizable/css/styles.css" var ReactGridLayout = require('react-grid-layout'); var data = []; class MyFirstGrid extends React.Component { constructor() { super(); this.state = { data: [] }; }

2021-09-02 18:12:10    分类:问答    reactjs   react-grid-layout

react-grid-layout example Unknown prop `_grid` on <div> tag

I'm trying to implement react-grid-layout. All of the examples pass the grid item configuration through a _grid div property: createElement(el) { ... return ( <div key={i} _grid={el}> ... </div> ); }, In my implementation: return ( <div key={i} _grid={el}> <DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/> <span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span> </div> ) I get an error: dashboard_view.browserify.browserified.js:1216 Warning: Unknown prop `_grid` on <div> tag. Remove this prop from the element. For details, see <URL

2021-06-24 02:56:23    分类:问答    reactjs   react-grid-layout