Question

我无法渲染。到目前为止，我是如何设置文件的。首先是app.js文件：

import React from 'react';
import MainPage from './MainPage';

export class App extends React.Component {
  render() {
    return (
      <div>
        <MainPage />
      </div>
    )
  }
}

这是第二个名为index.js的相关文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';

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

最后在MainPage组件中我导入了这个：

import App from "./app";

是否有理由不按原样使用文件结构？我知道我可以将ReacDOM.render放在app.js文件中作为替代，但由于单元测试的目的，文件结构必须与此类似。

Answer 1

您已导入App.js并通过ReactDOM呈现它。您不需要在MainPage中导入它，因为App是您MainPage的父级。目前您在MainPage中的导入声明是错误的。即使它是正确的，你也会进入循环导入。 App - ＆gt; MainApp - ＆gt; App - ＆gt; MainPage等等。

MainPage应该呈现您常用的内容。将MainPage更改为：

import React from 'react';
export default class MainPage extends React.Component {
  render() {
    return (
      <div>
        <h1>This is Main Page</h1>
      </div>
    )
  }
}

导出后

注意默认。

Answer 2

您正尝试使用以下方法导入文件app.js的默认导出：

import App from "./app";

但是你在app.js文件中使用了一个简单的导出：

export class App extends React.Component {

因此要导入此类，语法是（就像在index.js中一样）：

 import { App } from "./App";

顺便提一下，如果您要在孩子中导入父组件，则不应该这样做。

渲染React组件问题

2 个答案: