Question

我是React.js开发的新手，尝试了一个简单的hello world页面，但页面却空了，也没有出现任何错误。

我使用create-react-app创建此项目。创建项目后，我使用npm命令启动了localhost，并删除了src文件夹中的所有文件。比起我在index.js文件夹中创建了HelloWorld.jsx和src文件。然后，我在这些文件中编写这些代码。而且我的页面是空的。但是我想在页面中写Hello Mark。为什么代码会给我一个空白页？

index.js文件：

import React,{ Component } from 'react';

import HelloWorld from './HelloWorld';

class index extends Component {
  render() {
    return (
      <div className="index">
        <HelloWorld name="Mark" />
      </div>
    );
  }
}

export default index;

HelloWorld.jsx文件：

import React,{ Component } from 'react';

const HelloWorld = (props) => (
  <div>
    <h2>Hello <em>{props.name}</em></h2>
  </div>
);

export default HelloWorld;

Answer 1

好的，那么几件事：

首先，将根组件的名称从index更改为Index。 React组件应以大写字母开头。

然后，您必须在根级别使用ReactDOM.render()。这实际上是启动所有子组件的渲染和协调过程的原因。

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

import HelloWorld from './HelloWorld';

class Index extends Component {
  render() {
    return (
      <div className="index">
        <HelloWorld name="Mark" />
      </div>
    );
  }
}

ReactDOM.render(<Index />, document.getElementById("app"));

请注意，您还需要一个index.html文件，该文件的正文中带有div属性，该属性与上面的选择器相匹配（在本示例中为“ id”）

Answer 2

您的导入语句不正确。使用本地导入时，必须提供文件扩展名。

更改

import HelloWorld from './HelloWorld';

收件人

import HelloWorld from './HelloWorld.jsx';

编辑：正如BoyWithSilverWings指出的那样，该应用程序从未渲染到DOM中。您必须执行此步骤。这是您从HelloWorld示例中获取的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

将其移至索引文件后，便删除了渲染调用。

入门级“ Hello World” React项目给出了空白页

2 个答案: