Question

我对React还是很陌生，在App.js中渲染组件时遇到了麻烦。经过大量的搜寻之后，我仍然不知道为什么我只是在浏览器中得到空白的白页，而不是component1.js中显示的印刷文本。这是我的代码：

component1.js

import React from 'react';

class component1 extends React.Component {
    render() {
        return (
            <div>
                <h1>It's a bit chilly out there</h1>
            </div>
        );
    }
}

export default component1;

App.js

import React, { Component } from 'react';
import {component1} from './component1.js';

class App extends React.component{

    render() {
        return (
            <div>
                <component1 />
            </div>
        );
    }
}
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')
);

有人可以引导我走上正确的道路，并告诉我我在做什么错吗？

谢谢。

Answer 1

错误的情况：

class App extends React.Component
------------------------↑

此外，component1必须作为默认导入（不是命名导入）以大写字母导入：

import Component1 from './component1.js';

无法使用React在App.js中呈现子组件

1 个答案: