天道酬勤,学无止境

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)
  in Resizable (created by GridItem)
  in DraggableCore (created by GridItem)
  in GridItem (created by ReactGridLayout)
  in div (created by ReactGridLayout)
  in ReactGridLayout (created by ResponsiveReactGridLayout)
  in ResponsiveReactGridLayout (created by _class)
  in _class (created by DashboardLayout)
  in div (created by DashboardLayout)
  in DashboardLayout

我对 React 还很陌生。 我究竟做错了什么?


我使用的相关npm包版本:

"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-grid-layout": "^0.12.7",
回答1

这是 React 在今年 5 月左右对其代码库所做的更改。 有关更多信息,请参阅此拉取请求。

您收到此错误的原因是您正在尝试呈现非 HTML 识别的属性。

在 HTML5 中,您需要使用data-*定义自定义属性。

为了防止在您的情况下显示警告,您必须将渲染方法更改为此。

return (
    <div key={i} data-grid={el}>
        <DashboardTestWidget widgetName={el.name} menuName={this.props.menuName}/>
        <span className="remove" style={removeStyle} onClick={this.onRemoveItem.bind(this, i)}>x</span>
    </div>
);

请注意, _grid已更改为data-grid ,它现在将反应识别为有效的 HMTL 属性。

React 需要注意的一件事是,它允许您将自定义道具传递给自定义组件,但是当您将这些组件呈现为 HTML 时,它们需要是有效的 HTML 属性。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 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
  • 使用 react-grid-layout 调整 highcharts 的大小不起作用(Resize highcharts using react-grid-layout not working)
    问题 我正在反应并使用带有 react-grid-layout 的 highcharts 来调整 div 中元素的大小。 不知何故,可调整大小的功能适用于图像,但不适用于 highchart。 Grid.js 是一个制作 ResponsiveReactGridLayout 的文件,它从 chart.js 文件中获取 highchart。 请在下面找到代码。 //Grid.js import React, { Component } from 'react'; import {Responsive, WidthProvider,ReactGridLayout} from 'react-grid-layout'; import Charts from './charts.js'; const ResponsiveReactGridLayout = WidthProvider(Responsive); class Grid extends Component { onLayoutChange(layout) { console.log(layout); } render(){ return (<div style={{borderStyle: 'groove'}}> <h2> Panel Header </h2> <ResponsiveReactGridLayout className=
  • Resize highcharts using react-grid-layout not working
    I am working in react and using highcharts with react-grid-layout to resize the elements in div. Somehow resizable feature is working for images but not with highchart. Grid.js is a file that makes ResponsiveReactGridLayout and it gets the highchart from chart.js file. Please find the code below. //Grid.js import React, { Component } from 'react'; import {Responsive, WidthProvider,ReactGridLayout} from 'react-grid-layout'; import Charts from './charts.js'; const ResponsiveReactGridLayout = WidthProvider(Responsive); class Grid extends Component { onLayoutChange(layout) { console.log(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
  • 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: [] }; }
  • 替代 Gridster? [关闭](Alternative to Gridster? [closed])
    问题 关闭。 此问题不符合 Stack Overflow 准则。 它目前不接受答案。 想改善这个问题吗? 更新问题,使其成为 Stack Overflow 的主题。 2年前关闭。 改进这个问题 我已经将 Gridster 库用于一个使用拖放式多列网格的项目。 遗憾的是,Gridster 仅支持 Internet Explorer 9+。 我需要找到一个类似的简单易用的库,它可以让我使用 IE8 做同样的事情,如果可能的话,它也与 IE7 和 IE6 兼容。 那么,是否有用于旧 IE 的类似 Gridster 的库? 我在这个项目中使用 jquery,所以基于 jquery 的库也可能很棒。 PS 我找到了一个叫做 AnimaDrag,但它不如 Gridster,而且有点糟糕。 回答1 还有Shapeshift:https://github.com/McPants/jquery.shapeshift 和网格:http://ksylvest.github.io/jquery-gridly/ 这是 Gridster 的良好替代品。 (但请注意,Gridly 仅适用于方形瓷砖) 编辑:Packery 也很有趣:http://packery.metafizzy.co/。 但是,它需要商业项目的商业许可证,否则: 对于非商业、个人或开源项目和应用程序,您可以根据 GPL v3 许可证的条款使用
  • React Pass function to child component
    I want to pass a function to a child component but I'm getting this error. 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> } } Basically what I'm trying to do. 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
  • 资源被解释为样式表,但以MIME类型text / html传输(似乎与Web服务器无关)(Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server))
    问题 我有这个问题。 Chrome继续返回此错误 资源被解释为样式表,但以MIME类型text / html传输 受此错误影响的文件只是Style,selected和jquery-gentleselect(以相同方式导入到索引中的其他CSS文件可以正常工作且没有错误)。 我已经检查过我的MIME类型,并且text / css已经在CSS上。 老实说,我想从理解问题开始(看来我不能独自做一件事)。 回答1 我想从了解问题开始 浏览器向服务器发出HTTP请求。 然后,服务器发出HTTP响应。 请求和响应都由一堆标题和(有时是可选的)正文组成,其中包含一些内容。 如果有正文,则标题之一就是Content-Type ,它描述了正文(是HTML文档,图像还是表单提交的内容等等)。 当您请求样式表时,服务器会告诉浏览器它是HTML文档( Content-Type: text/html )而不是样式表( Content-Type: text/css )。 我已经检查过myme.type和text / css已经在CSS上了。 然后,关于服务器的其他事情使该样式表带有错误的内容类型。 使用浏览器开发人员工具的“网络”选项卡检查请求和响应。 回答2 使用Angular吗? 这是要记住的非常重要的警告。 基本标签不仅需要位于头部,而且还必须位于正确的位置。 我的基本标签在头部的错误位置
  • Storing layout for my react app in local storage not working
    I am working with react-grid-layout and creating some grids which are drag-drop as well as resizable. So i am able to achieve that and it is working fine. My UI is like I have two tabs and each tab have some grids, so when I move from one tab two other I am showing that tab's grid. What I am trying to do On change of layout I want to store that layout to local storage so that when I refresh or open that tab again the formation of grid should be the one which I changed. So as per mentioned in library I am using this So what I am doing is when ever onLayoutChange happens I am storing the layout
  • ReactJS-获取元素的高度(ReactJS - Get Height of an element)
    问题 React渲染元素后如何获取元素的高度? 的HTML <div id="container"> <!-- This element's contents will be replaced with your component. --> <p> jnknwqkjnkj<br> jhiwhiw (this is 36px height) </p> </div> ReactJS var DivSize = React.createClass({ render: function() { let elHeight = document.getElementById('container').clientHeight return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>; } }); ReactDOM.render( <DivSize />, document.getElementById('container') ); 结果 Size: 36px but it should be 18px after the render 它正在计算渲染之前的容器高度(36像素)。 我想获得渲染后的高度。 在这种情况下,正确的结果应为18px。
  • Permission denied for Git Clone when I do npm install
    I have git dependencies in my package.json file. When I do sudo npm install in my react app folder, I get this error npm ERR! code 1 npm ERR! Command failed: /usr/bin/git clone --depth=1 -q -b master https://github.com/lrojas94/react-file-base64.git /home/admin1/.npm/_cacache/tmp/git-clone-462782fb npm ERR! /home/admin1/.npm/_cacache/tmp/git-clone-462782fb/.git: Permission denied npm ERR! npm ERR! A complete log of this run can be found in: npm ERR! /home/admin1/.npm/_logs/2017-07-18T08_58_10_906Z-debug.log admin1@ubuntu:~/hys_pms/ui$ nohup: appending output to ‘nohup.out’ This is my package
  • 在 React.js 中编辑丰富的数据结构(Editing a rich data structure in React.js)
    问题 我正在尝试为数据结构创建一个简单的基于网格的编辑器,但我在 React.js 中遇到了一些概念上的问题。 他们的文档对此不是很有帮助,所以我希望这里有人可以提供帮助。 首先,将状态从外部组件转移到内部组件的正确方法是什么? 内部组件的状态变化是否可能“冒泡”到外部组件? 其次,两个独立的组件是否可以共享数据,以便一个的突变在另一个中可见? 下面是我想做的事情的简化示例(JSFiddle 版本): 我有一个company包含的阵列对象employee对象。 我想在可编辑的网格中布置employee列表。 当我单击按钮时,我想查看生成的company对象以及任何更改(写入控制台)。 /** @jsx React.DOM */ var Cell = React.createClass({ getInitialState: function () { return {data: ""}; }, componentWillMount: function () { this.setState({data: this.props.data}); }, onChange: function (evt) { console.log(this.state, evt.target.value); this.setState({data: evt.target.value}); }, render
  • Getting Error scanning file when running jetty 9 on java 8 using the maven jetty plugin [duplicate]
    This question already has answers here: Spring AOP gives IllegalArgumentException with Java 8 (3 answers) Closed 6 years ago. I'm running a trivial Hello World web application using servlet-3.1, jetty-9 running on jdk-8 and using the maven-jetty-plugin. public class HelloWorldServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) { try { String message = "Hello Jetty From the HelloWorldServlet"; OutputStream stream = response.getOutputStream(); stream.write(message.getBytes()); stream.flush(); } catch (IOException ex) { Logger
  • 使用 maven jetty 插件在 java 8 上运行 jetty 9 时获取错误扫描文件 [重复](Getting Error scanning file when running jetty 9 on java 8 using the maven jetty plugin [duplicate])
    问题 这个问题在这里已经有了答案: Spring AOP 使用 Java 8 提供 IllegalArgumentException (3 个回答) 6年前关闭。 我正在使用 servlet-3.1、jetty-9 在 jdk-8 上运行并使用maven-jetty-plugin运行一个简单的Hello World Web 应用程序。 public class HelloWorldServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) { try { String message = "Hello Jetty From the HelloWorldServlet"; OutputStream stream = response.getOutputStream(); stream.write(message.getBytes()); stream.flush(); } catch (IOException ex) { Logger.getLogger(HelloWorldServlet.class.getName()).log(Level.SEVERE, null, ex); } } 并很好地映射到web
  • 如何从后面的代码访问静态变量? [复制](How to access a static variable from code behind? [duplicate])
    问题 这个问题在这里已经有了答案: 将 XAML 中的标签文本设置为字符串常量(3 个回答) 7年前关闭。 问题:是否可以从后面的代码中访问要在 XAML 中使用的静态变量? 原因:我想要一个字符串变量来保留一个菜单名称,该名称将在不同的地方(在代码后面和 XAML 中)使用。 示例(后面的代码): public partial class MainWindow : Window { public static readonly string menuName = "MyMenu"; ... other code ... } 示例(XAML): <MenuItem Header="... here I want my menuName to appear ..." /> 回答1 为此,您需要在 xaml 中实例化一次您的类,然后您可以使用静态成员。 最好为静态变量创建一个单独的类并将其加载到资源中的 xaml 中。 像这样的东西 <Window.Resources> <!-- Create an instance of the class called MyClass --> <my:MyClass x:Key="MyClass" /> </Window.Resources> 然后将其用作类似的东西 <TextBox Text="{x:Static my:MyClass
  • Chrome sendrequest错误:TypeError:将圆形结构转换为JSON(Chrome sendrequest error: TypeError: Converting circular structure to JSON)
    问题 我有以下... chrome.extension.sendRequest({ req: "getDocument", docu: pagedoc, name: 'name' }, function(response){ var efjs = response.reply; }); 该调用以下内容。 case "getBrowserForDocumentAttribute": alert("ZOMG HERE"); sendResponse({ reply: getBrowserForDocumentAttribute(request.docu,request.name) }); break; 但是,我的代码永远不会到达“ ZOMG HERE”,而是在运行chrome.extension.sendRequest抛出以下错误 Uncaught TypeError: Converting circular structure to JSON chromeHidden.JSON.stringify chrome.Port.postMessage chrome.initExtension.chrome.extension.sendRequest suggestQuery 有谁知道是什么原因造成的? 回答1 这意味着您在请求中传递的对象(我想它是pagedoc )具有循环引用,类似于:
  • vue项目中所使用的element-UI / echarts
    高清版思维导图见后台管理项目地址 1.login登录页面 < el-form >表单 在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 <el-form label-position="top" --【 对齐方式 (顶部对齐) 登录-换行-input的形式】 label-width="80px" -- 【表单域标签的宽度。作为 Form 直接子元素的 form-item 会继承该值。支持 auto】 :model="formdata" -- 【双向数据绑定,表单数据对象】 class="login-form" :rules="rules" -- 【表单验证规则 ref="formdata" -- 【vue操作dom元素】 > <el-form-item label="用户名" -- 【label是form-item的属性】 prop="username" -- 【设置为需校验的字段名】 > <el-input v-model="formdata
  • 每n个词分割一个词向量(向量在列表中)(split vectors of words by every n words (vectors are in a list))
    问题 如何最好地分割列表中单词的向量? 这是我当前正在做的事情(这是由于geektrader的回答),但是它使RStudio颤抖并冻结了很多。 这个问题与我先前的问题紧密相关。 这里的新功能是列表结构,它更接近我的实际用例。 # reproducible data examp1 <- "When discussing performance with colleagues, teaching, sending a bug report or searching for guidance on mailing lists and here on SO, a reproducible example is often asked and always helpful. What are your tips for creating an excellent example? How do you paste data structures from r in a text format? What other information should you include? Are there other tricks in addition to using dput(), dump() or structure()? When should you include library()
  • react源码解析-jsx转换为ast树及渲染
    react源码解析-jsx转换为ast树及渲染挂载 我用react有一段时间了,但是却对其实现的原理一知半解,只知道这样用能行,但是其怎么实现的并不知道。知其然才能对一些性能优化,写代码的时候才能考虑得更充分,将react的利用率达到更高,对代码的质量及项目的架构也会有更好的认识。 jsx转换ast树 babel识别jsx语法 babel在这里具体怎么将jsx转换为react的createElement函数调用,暂且不深说,只需要知道babel在这里的功能是将jsx语法的代码转换为React.createElement()的函数调用 在https://www.babeljs.cn/repl,可以测试:例: const a=<h1 style={{"color":"red"}}>123<div>test</div></h1> 经过编译之后 "use strict"; var a = React.createElement("h1", { style: { "color": "red" } }, "123", React.createElement("div", null, "test")); 可以看出babel在我们正常的项目中,遇到jsx语法就会将jsx代码转换为React.createElement()的函数调用 React.createElement()是如何转换为ast树的?
  • Extrafont 和 ggsave:字符最终位于另一个之上(Extrafont and ggsave: Characters end up on top of another)
    问题 我目前正在尝试在我的所有情节中使用 Arial.ttf。 我在网上找到了几本关于字体的手册,但是当我尝试通过 ggsave 和默认设备保存锅时遇到了问题。 最小工作示例 我正在运行以下最小工作示例来重现此错误: Sys.setenv(R_GSCMD="D:/gs/bin/gswin64c.exe") library(ggplot2) require(extrafont) font_import(prompt = F, pattern = "arial.ttf") font_import(prompt = F, pattern = "JOKERMAN.TTF") loadfonts(device="win", quiet = T) loadfonts(device="pdf", quiet = T) plot <- ggplot(mtcars, aes(wt, mpg, colour = hp)) + geom_point() jokerman_plot <- plot + theme_bw(base_family = "Jokerman") arial_plot <- plot + theme_bw(base_family = "Arial") ggsave("arial_plot.png", arial_plot) ggsave("arial_plot.pdf"