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尝试data-ng-app（并且data-前缀为所有ng-*指令），angular仍应将这些属性识别为角度指令和其他脚本和验证者应将它们视为标准HTML data-* Attributes，因此请忽略它们，不要被它们的存在所冒犯。

已有关于此标记的帖子： ng-app vs. data-ng-app, what is the difference?

更新：修复其他错误/警告......

警告：validateDOMNesting（...）：<body>无法显示为<div>的孩子。

在index.html文件的body标记上声明data-ng-app="App"，并同时删除react组件的<body>函数中的render标记。

警告：未知的DOM属性类。你的意思是className吗？ 在反应组件的render函数中，将class更改为className

如何修复＆＃34;警告：标签上的未知道具`ng-app`。从元素中移除这个道具＆＃34;错误？

1 个答案: