1

私は反応を学んでおり、公式の反応ウェブサイト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>

Webページを開くと、このエラーが発生します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 に答える