我很陌生，我在添加新文件时遇到问题答案

【问题标题】：I'm very new to react and I am having issues with adding a new file我很陌生，我在添加新文件时遇到问题
【发布时间】：2018-07-18 02:12:44
【问题描述】：

这是我的 app.js 文件。我试图添加另一个名为Align.js 的文件。我试图在这里导入它，但它不起作用。我不断收到语法错误。这可能有很多问题。

app.js

import React, { Component } from 'react';
import Header from './Header.js';
import './App.css';
import Mainimage from './Mainimage.js';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Mainimage />
      </div>
    );
  }
}

export default App;

【问题讨论】：

你面对的issues是什么？
我尝试添加另一个名为 Align.js 的文件，其中包含一些 jsx 内容。我尝试将它导入到这个 app.js 文件中，但我一直收到错误消息。我不太确定我做错了什么，但可能是我使用的代码（reg. html）。
您是否在 Align.js 中导出了组件？还有你是如何导入的，告诉我们你的语法。
这里是 align.js 文件语法。请注意，我对反应很陌生，所有这些都可能是错误的：
从'react'导入反应，{组件}；类对齐扩展组件 { render() { return (

); }

标签： html reactjs jsx

【解决方案1】：

您需要导出您的组件才能将其导入另一个

Align.js

import React, { Component } from 'react';

class Align extends Component {
  render() {
    return (
      <div className="Align">
       Align Component
      </div>
    );
  }
}

export default Align;

App.js

import React, { Component } from 'react';

import Header from './Header.js';

import './App.css';

import Mainimage from './Mainimage.js';

import Align from './Align';  // .js is optional, should already be handled by bundler

class App extends Component {
  render() {

    return (

      <div className="App">

        <Header />
        <Mainimage />
        <Align/>
      </div>
    );
  }
}

export default App;

【讨论】：

请注意，通常您不会在导入语句中包含扩展名。