如何修復“警告：未知的道具`ng-app`在 <body> 標簽。從元素中刪除該道具”錯誤？

Question

我正在嘗試通過React渲染網頁，並添加一些使用Angular的代碼。 我用Webpack包裝了頁面。 運行HTML時，出現以下錯誤：

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.

我的HTML是：

<!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>

我的JSX文件是：

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")
);

是什么引起了關於道具的這些錯誤？ 這是我的文件為.jsx引起的問題嗎？ 我該如何解決？

更新：

使用Mathew Cawley的答案，我通過在所有ng指令中使用data-ng-app而不是ng-app來修復了一些錯誤。 現在我得到以下錯誤：

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.

Answer 1

而不是ng-app try data-ng-app （為此在所有ng-*指令前添加data-前綴），angular仍應將這些屬性識別為angular指令，其他腳本和驗證程序應將它們視為標准HTML數據- *屬性，因此可以忽略它們，並且不會因它們的存在而受到冒犯。

已經有關於此標記的文章： ng-app與data-ng-app，有什么區別？

更新：要修復其他錯誤/警告...

警告：validateDOMNesting（...）： <body>不能作為<div>的子代出現。

在index.html文件中的body標簽上聲明data-ng-app="App" ，並在react組件的render函數中一起刪除<body>標簽。

警告：未知DOM屬性類。 您是說className嗎？ 在react組件的render函數中，將class更改為className

如何修復“警告：未知的道具`ng-app`在 <body> 標簽。從元素中刪除該道具”錯誤？

問題描述

1 個解決方案

解決方案1
2 已采納 2017-01-29 21:42:09

如何修復“警告：未知的道具`ng-app`在 <body> 標簽。 從元素中刪除該道具”錯誤？

問題描述

1 個解決方案

解決方案1 2 已采納 2017-01-29 21:42:09

如何修復“警告：未知的道具`ng-app`在 <body> 標簽。從元素中刪除該道具”錯誤？

解決方案1
2 已采納 2017-01-29 21:42:09