Question

我正在学习反应并使用官方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

这里发生了什么？

Answer 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')
);

Answer 2

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

guiStyle: "bootstrapNoHover"（在app.js中）

export const Todo

为什么我的反应变量渲染在DOM上？

2 个答案: