2017-08-08 1 views
1

Ich verwende Reagieren 15.6.1 und versuchen, einige Mikrodaten in meinen Text eingefügt werden:Reagieren: "Warnung: Unbekannte DOM-Eigenschaft itemscope. Meinen Sie itemScope?"

<div itemScope itemType="http://schema.org/VideoGame"> 

Aber ich halte die folgende Warnung in der Konsole zu sehen:

Warning: Unknown DOM-Eigenschaft Objektbereich. Meintest du itemScope?

Nach this sollte es funktionieren.

Jeder könnte mir helfen und herausfinden, was los ist? Ist meine Version von React zu alt oder muss ich irgendwo ein Flag definieren, damit es funktioniert?

Das ist mein package.json: (I npm zum Debuggen beginnen benutzen und npm Lauf bauen bereitstellen)

{ 
    "name": "P", 
    "version": "0.1.0", 
    "description": ".", 
    "private": true, 
    "devDependencies": { 
     "babel-plugin-react-html-attrs": "^2.0.0", 
     "babel-plugin-transform-runtime": "^6.23.0", 
     "babel-polyfill": "^6.23.0", 
     "babel-preset-stage-2": "^6.24.1", 
     "babili-webpack-plugin": "^0.1.2", 
     "compression-webpack-plugin": "^1.0.0", 
     "react-hot-loader": "^1.3.1", 
     "react-scripts": "1.0.10", 
     "serve-favicon": "^2.4.3", 
     "webpack-dev-server": "^2.5.1", 
     "webpack-hot-middleware": "^2.18.2" 
    }, 
    "dependencies": { 
     "axios": "^0.16.2", 
     "babel-core": "^6.25.0", 
     "babel-loader": "^7.1.1", 
     "babel-plugin-transform-class-properties": "^6.24.1", 
     "babel-plugin-transform-decorators-legacy": "^1.3.4", 
     "babel-plugin-transform-runtime": "^6.23.0", 
     "babel-polyfill": "^6.23.0", 
     "babel-preset-es2015": "^6.24.1", 
     "babel-preset-react": "^6.24.1", 
     "babel-preset-stage-0": "^6.24.1", 
     "babel-preset-stage-2": "^6.3.13", 
     "circular-dependency-plugin": "^3.0.0", 
     "classnames": "^2.2.5", 
     "clean-webpack-plugin": "^0.1.16", 
     "copy-webpack-plugin": "^4.0.1", 
     "css-loader": "^0.28.4", 
     "dotenv": "^4.0.0", 
     "es6-promise": "^4.1.1", 
     "file-loader": "^0.11.2", 
     "firebase": "^4.1.3", 
     "history": "^4.6.3", 
     "immutable": "^3.8.1", 
     "invariant": "^2.2.2", 
     "isomorphic-fetch": "^2.2.1", 
     "jsdom": "^11.1.0", 
     "jsonwebtoken": "^7.4.1", 
     "konva": "^1.6.3", 
     "less-loader": "^4.0.5", 
     "react": "^15.6.1", 
     "react-addons-css-transition-group": "^15.6.0", 
     "react-async-script": "^0.9.1", 
     "react-async-script-loader": "^0.3.0", 
     "react-bootstrap": "^0.31.1", 
     "react-dnd": "^2.4.0", 
     "react-dnd-html5-backend": "^2.4.1", 
     "react-dom": "^15.6.1", 
     "react-fontawesome": "^1.6.1", 
     "react-ga": "^2.2.0", 
     "react-google-recaptcha": "^0.9.6", 
     "react-gravatar": "^2.6.3", 
     "react-helmet": "^5.1.3", 
     "react-input-range": "^1.2.1", 
     "react-konva": "^1.1.3", 
     "react-modal": "^2.2.2", 
     "react-page-click": "^4.0.1", 
     "react-recaptcha": "^2.3.2", 
     "react-redux": "^5.0.5", 
     "react-router": "^3.0.2", 
     "react-router-redux": "^4.0.0", 
     "redux": "^3.7.2", 
     "redux-form": "^7.0.1", 
     "redux-logger": "^2.3.2", 
     "redux-thunk": "^2.2.0", 
     "rimraf": "^2.6.1", 
     "single-module-instance-webpack-plugin": "0.0.4", 
     "style-loader": "^0.18.2", 
     "superagent": "^3.5.2", 
     "webpack": "^3.3.0", 
     "webpack-bundle-analyzer": "^2.9.0", 
     "xml2js": "^0.4.17", 
     "xmldom": "^0.1.27", 
     "xpath": "0.0.24" 
    }, 
    "scripts": { 
     "start": "node devServer.js --progress --verbose", 
     "clean": "rimraf ./dist", 
     "dev": "webpack -d --watch --progress --display-error-details --display-reasons", 
     "start1": "webpack-dev-server --config ./webpack.config.comphotdeploy -d --progress --colors --host localhost --port 28080 --hot --inline --content-base src", 
     "builddev": "webpack -d --progress --display-error-details --display-reasons", 
     "build": "webpack -p --progress --verbose", 
     "dist": "rimraf ./dist&&webpack -d --display-error-details --display-reasons", 
     "start-react": "SET PORT=9999&&SET DEVTOOL=source-map&&react-scripts start", 
     "build-react": "react-scripts build", 
     "test": "react-scripts test --env=jsdom", 
     "eject": "react-scripts eject" 
    }, 
    "eslintConfig": { 
     "extends": "./node_modules/react-scripts/config/eslint.js" 
    } 
} 
+0

Haben Sie versucht, Ihren Browser-Cache (oder Eslint oder Nodejs Server-Cache, auch ...) zu löschen und erneut auszuführen? Weil alles wie erwartet mit diesem vereinfachten Markup funktioniert: '

CONTENT
'. Versuchen Sie auch, dieses Paket zu entfernen: 'babel-plugin-react-html-attrs', es kann zu Probs führen [aus möglicherweise unbekannten Gründen ...]. – Denialos

+0

Ich weiß nicht Reagieren, bin aber neugierig: Gibt es einen Grund, 'itemScope' /' itemType' anstelle von 'itemscope' /' itemtype' zu ​​verwenden? – unor

+0

Wenn du react verwendest, musst du das obere Kästchen benutzen, wie ich es geschrieben habe. Zitat von der React-Site: 'Reagieren verwendet camelCased-Attribute, also sollte es itemProp, itemType und itemScope sein (es erscheint immer noch im DOM untergeordnet)' –

Antwort

0

schließlich das Problem des itemscope einer gefunden wurde erklärt, wie Objektbereich. Ich habe es nicht gesehen, weil es außerhalb des Editorfensters als Teil einer langen Zeichenfolge war.

Verwandte Themen