为什么我的反应变量不会在 DOM 上呈现？答案

【问题标题】：Why won't my react variable render on the DOM?为什么我的反应变量不会在 DOM 上呈现？
【发布时间】：2016-09-05 05:26:31
【问题描述】：

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

我已按照说明开始编辑提供的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

这是怎么回事？

【问题讨论】：

标签： javascript reactjs ecmascript-6 es6-modules

【解决方案1】：

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

export {
    Todo,
    App
};

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

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

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

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

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

【讨论】：

谢谢安德鲁。这终于对我有用。非常感谢！

【解决方案2】：

嘿，我认为您需要从 app.js 导出 TODO 并在 index.js 中导入 TODO

export const Todo（在 app.js 中）

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

【讨论】：

感谢莱昂内尔的回复。不幸的是，它没有用。添加export const Todo; 给了我一个错误Syntax error: Unexpected token (29:17)
这是因为 var 不能导出为 const。您需要清楚地导出它。 @DanRubio