1

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

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

在我的 App.js 文件中，我正在创建一个类并使用idTodo在 DOM 上呈现它。#container

这是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

这里发生了什么？

4

2 回答 2

2

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

export {
    Todo,
    App
};

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

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

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

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

ReactDOM.render(
    <Todo />,
    document.getElementbyId('container')
);
于 2016-09-05T05:41:17.317 回答
0

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

export const Todo（在 app.js 中）

import Todo from "./app";(in index.js)
于 2016-09-05T05:32:02.610 回答