Question

这是我的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;

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

我是新手，我在添加新文件时遇到问题

1 个答案: