How to fix “Warning: Unknown prop `ng-app` on <body> tag. Remove this prop from the element” error?
Question
I'm trying to render a webpage through React with the addition of some code the uses Angular. I packaged my page with Webpack. When I run my HTML, I get the following errors:
Warning: Unknown prop `ng-app` on <body> tag. Remove this prop from the element.
Warning: validateDOMNesting(...): <body> cannot appear as a child of <div>.
Warning: Unknown DOM property class. Did you mean className?
Warning: Unknown props `change-background`, `colorcode` on <div> tag.
Warning: Unknown prop `ng-click` on <li> tag. Remove this prop from the element.
My HTML is:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="cssWEB.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="public/bundle.js" type="text/javascript"></script>
</body>
</html>
My JSX file is:
import angular from 'angular';
angular.module('App', [])
.directive('changeBackground', ['$animate', function($animate) {
return {
restrict: 'EA',
scope: {
colorcode: '@?'
},
link: function($scope, element, attr) {
element.on('mouseenter', function() {
element.children().addClass('change-color');
element.children().css('background-color', $scope.colorcode);
});
element.on('mouseleave', function() {
element.children().removeClass('change-color');
element.children().css('background-color', '@red');
});
}
};
}]).directive('myClick', () => {
return {
restrict: 'A',
link: (scope) => {
scope.clicked = () => {
console.log('pppp');
window.location.hash = "#snap1";
}
}
};
}).directive('click2', () => {
return {
restrict: 'A',
link: (scope) => {
scope.clicked2 = () => {
console.log("aaaaaa");
}
}
}
})
//REACT//
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>
My Page
</header>
<body ng-app="App">
<div class="cube" change-background colorcode="#f45642" ref={(el) => { this.messagesEnd = el; }}>
<div class="front"><span>Resume</span></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="wrap2">
<div class="cube" change-background>
<div class="front" colorcode="#f45642"><span>Work</span></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<div class="wrap3">
<div class="cube" change-background>
<div class="front" colorcode="#f45642"><span>Contact</span></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
<Element name="link1">
<div class="bg2" id="linkhere"></div>
</Element>
<div class="slide1">
</div>
<div class="slidechild1">
<div class="centerbox">
<div class="center">
<ul>
<li ng-click="clicked2()" id="B1">aa</li>
<li id="B2">cc.i</li>
</ul>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<Component />,
document.getElementById("root")
);
What is raising these errors regarding props? Is this a problem caused by having my file to be .jsx? How can I fix them?
Update:
Using Mathew Cawley's answer I manged to fix some of the errors by using data-ng-app instead of ng-app in all of my ng directives. Now I get the following errors:
Warning: validateDOMNesting(...): <body> cannot appear as a child of <div>.
Warning: Unknown DOM property class. Did you mean className?
Warning: Unknown props `change-background`, `colorcode` on <div> tag. Remove these props from the element.
1 answers
solution1
2 ACCPTED 2017-01-29 21:42:09
Instead of ng-app try data-ng-app (and prefix data- to all ng-* directives for that matter), angular should still recognize those attributes as angular directives, and other scripts and validators should treat them as standard HTML data-* Attributes and so ignore them and not be offended by their presense.
There is already a post about this markup: ng-app vs. data-ng-app, what is the difference?
UPDATE: To fix other errors/warnings...
Warning: validateDOMNesting(...): <body> cannot appear as a child of <div> .
Declare data-ng-app="App" on the body tag in your index.html file, and remove the <body> tag in the react component's render function all together.
Warning: Unknown DOM property class. Did you mean className? In the react component's render function, change class to className
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.