时间戳

首页 > 解决方案 > 页面未在 React.js 中显示

javascript - 页面未在 React.js 中显示

问题描述

我正在尝试基于 React.js 构建一个登录页面，但是在我使用 react.js 引导程序所做的一切之后，该页面没有显示，而仅显示为原始的默认反应页面；

这是 App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

ReactDOM.render(<App />, document.getElementById('root'));
const Example = (props) => {
  return (
<Card style={{ width: "18rem" }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>
  );
};

export default Example;[enter image description here][1]
serviceWorker.unregister();

由于我是 React.js 的新手，我想知道是否有一些我错过了导入或导出的文件，请帮忙谢谢！

标签： javascripthtmlcssreactjsreact-bootstrap

解决方案

我可以从您的代码中看到您的App 组件将呈现给 DOM。

您是否也在寻找您的示例组件？然后您需要首先将您的示例组件包含在 APP 组件本身的某处（在 app.js 中导入示例），然后将您的 App 组件渲染到 index.js 中的 DOM

推荐阅读