为什么我的 React 变量不会在 DOM 上呈现？

Question

我正在学习 React 并正在使用来自官方 React 网站的 github 存储库 create-react

我已按照说明开始编辑所提供的 App.js。

在我的 App.js 文件中，我正在创建一个 Todo class 并使用 #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

这是怎么回事？

Answer 1

嘿，我想你需要从 app.js 导出 TODO 并在 index.js

导入 TODO

export const Todo（在app.js）

import Todo from "./app";(in index.js)

Answer 2

您需要导出 Todo 变量（一个 React class）以及 App 组件。为此，请使用 export 后跟大括号和您要导出的内容：

export {
    Todo,
    App
};

这使得这个 public 并且可以导入。两者现在都可以在不同的文件中使用。像这样导入：

import { App, Todo } from './App';

这将导入两个导出的组件，您将能够访问它们。然后像往常一样渲染：

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

ReactDOM.render(
    <Todo />,
    document.getElementbyId('container')
);

为什么我的 React 变量不会在 DOM 上呈现？

Why won't my react variable render on the DOM?

javascript

ecmascript-6

reactjs

es6-modules