如何修复“警告：未知道具`change-background`，<div>标签上的`colorcode`。从元素中删除这些道具”错误？
Posted
技术标签:
【中文标题】如何修复“警告：未知道具`change-background`，<div>标签上的`colorcode`。从元素中删除这些道具”错误？【英文标题】：How to fix "Warning: Unknown props `change-background`, `colorcode` on <div> tag. Remove these props from the element" error? 【发布时间】：2017-06-17 15:47:22 【问题描述】：我在加载使用 Webpack 打包的页面时遇到问题。我使用 React 来呈现页面 html。当我在我的网络浏览器中打开我的 html 时，它给了我以下错误：
Warning: Unknown props `change-background`, `colorcode` on <div> tag. Remove these props from the element.
in div (created by Component)
in div (created by Component)
in Component"
我的html是：
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="cssWEB.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body data-ng-app="App">
<div id="root"></div>
<script src="public/bundle.js" type="text/javascript"></script>
</body>
</html>
我的 JS 是：
import React from 'react';
import ReactDOM from 'react-dom';
import Element, scroller from 'react-scroll';
const Component = React.createClass(
componentDidMount: function()
scroller.scrollTo('myScroller',
duration: 1500,
delay: 500,
smooth: true
);
,
render: function()
return (
<div>
<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link type="text/javascript" href="jscode.js"></link>
<header>
La Barriada
</header>
<div className="cube" change-background colorcode="#f45642" ref=(el) => this.messagesEnd = el; >
<div className="front"><span>Experience</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
<div className="wrap2">
<div className="cube" change-background>
<div className="front" colorcode="#f45642"><span>Work</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
</div>
<div className="wrap3">
<div className="cube" change-background>
<div className="front" colorcode="#f45642"><span>Contact</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
</div>
<Element name="link1">
<div className="bg2" id="linkhere"></div>
</Element>
<div className="slide1">
</div>
<div className="slidechild1">
<div className="centerbox">
<div className="center">
<ul>
<li data-ng-click="clicked2()" id="B1">aa</li>
<li id="B2">cc.i</li>
</ul>
</div>
</div>
</div>
</div>
);
);
ReactDOM.render(
<Component />,
document.getElementById("root")
);
是什么导致了这个错误，我该如何解决？
【问题讨论】：
【参考方案1】：您可能需要仔细检查这些属性是否按 React 排序。你可以通过阅读docs page here来做到这一点。
看起来不像那些 DOM 属性 change-background 或 colorcode 是
支持。
编辑：相同的文档指出：
在 React 中，所有 DOM 属性和属性（包括事件处理程序） 应该是驼峰式的。例如，HTML 属性 tabindex 对应于 React 中的属性 tabIndex。
因此可能值得在您的 JSX 中分别尝试 changeBackground 和 colorCode 看看是否能解决问题。
【讨论】：
【参考方案2】：ReactJS 目前不支持here 指定的自定义属性。它剥离了未知的属性。您可以通过在此SO answer 中指定的componentDidMount 方法中手动添加属性来解决问题。
【讨论】：
【参考方案3】：您不能使用任何自定义属性作为道具。相反，您应该使用有效的 html 属性。 React 支持几乎所有有效的 html 属性。 Here 是 React 支持的有效 html 属性列表。
【讨论】：
以上是关于如何修复“警告：未知道具`change-background`，<div>标签上的`colorcode`。从元素中删除这些道具”错误？的主要内容，如果未能解决你的问题，请参考以下文章