[英]'React' is defined but never used
我正在按照官方 reactjs說明創建示例應用程序。 我的節點版本是 6.9.0。
我創建了示例反應應用程序,它應該根據官方網站使用以下說明顯示一個空的井字游戲表:
npm install -g create-react-app
create-react-app my-app
cd my-app
更改為my-app目錄
按照指示刪除了源目錄中的默認文件。 現在我的index.js看起來像這樣
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
然后我跑了yarn start
但我看到的只是空白屏幕,沒有井字游戲桌。 控制台中有幾個警告說
Compiled with warnings.
./src/index.js
Line 1: 'React' is defined but never used no-unused-vars
Line 2: 'ReactDOM' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
您應該創建一些組件/元素/,也許對其進行樣式設置,然后調用ReactDOM
將您的組件渲染到底層 html,然后您將擁有它。
React
用於處理 JSX 和 React 組件的創建ReactDOM
將用於將創建的元素呈現給 dom。見這里: https : //reactjs.org/blog/2015/10/01/react-render-and-top-level-api.html
所以加入類似的東西
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
對於您的代碼,如果在index.html
<body>
標簽中有id="root"
元素,您將得到一些信息
您錯過了第 4 步和第 5 步中的最后一部分:
索引文件
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol, ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
索引.js
class Square extends React.Component {
render() {
return (
<button className="square">
{/* TODO */}
</button>
);
}
}
class Board extends React.Component {
renderSquare(i) {
return <Square />;
}
render() {
const status = 'Next player: X';
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
class Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
這只是意味着您的項目已配置 eslint 以捕獲未使用的變量。
如果您在該文件中使用 JSX 或任何 React,警告將消失,就像 zmii 在他的回答中所建議的那樣。
但是我寫這個答案是因為有人向我展示了他們的代碼並且他們面臨着同樣的問題。
他們的代碼:
import React from 'react';
const person = () => {
return "<h2>I am a person!</h2>"
};
export default person;
上面代碼中的問題是他在返回時使用了雙引號。 因此,它不是 JSX,而是返回字符串,因此他們收到錯誤,說 React 從未被使用過。
結論:語法很重要,所以請記住,特別是在您剛開始時。
希望這可以幫助某人。
ESlint 需要配置為與 React JSX 一起使用。 這篇優秀的文章包含所有細節。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.