我正在学习 React 并且正在使用 React 官方网站上的这个 github 存储库 create-react
我已按照说明开始编辑提供的 App.js。
在我的 App.js 文件中，我正在创建一个 Todo 类并使用 #container id 在 DOM 上呈现它。
这是 App.js 文件:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
var Todo = React.createClass({
render: function() {
return (
<h1 className="todo">Hello</h1>
);
}
});
export default App;
这是 index.js 文件:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
ReactDOM.render(
<Todo />,
document.getElementbyId('container')
);
这是 index.html 文件:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="./src/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<div id="container"></div>
</body>
</html>
当我打开网页时出现此错误 21:5 warning 'Todo' is defined but never used no-unused-vars
这是怎么回事？
最佳答案
您需要将 Todo 变量(一个 React 类)与 App 组件一起导出。为此，请使用 export 后跟大括号和您要导出的内容:
export {
Todo,
App
};
这使其公开且可导入。两者现在都可以在不同的文件中使用。像这样导入:
import { App, Todo } from './App';
这将导入两个导出的组件，您将能够访问它们。然后像往常一样渲染:
ReactDOM.render(
<App />,
document.getElementById('root')
);
ReactDOM.render(
<Todo />,
document.getElementbyId('container')
);
关于javascript - 为什么我的 react 变量不会在 DOM 上呈现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39324375/