页面未在 React.js 中显示

Question

我正在尝试基于 React.js 构建一个登录页面，但在我使用 react.js bootstrap 完成所有操作之后，该页面未显示，而仅显示为原始默认反应页面；

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

索引.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 的新手，是否有一些文件我错过了导入或导出，请帮助谢谢！

Answer 1

所以你将原始应用程序渲染到页面： ReactDOM.render(<App />, document.getElementById('root'));

如果您自定义应用程序文件而不是在索引中，例如

function App() { = (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 App;

然后它应该呈现在页面上。

Answer 2

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

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

Answer 3

嘿，您正在此处渲染应用程序组件，这一行正在执行ReactDOM.render(<App />, document.getElementById('root'));

如果你想渲染示例组件，你需要把它放在 App.js 文件中，如下所示

import React from 'react';
import logo from './logo.svg';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

function App() {
  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 App;

在底部答案中添加导出默认应用程序更新

Answer 4

可以像这样实现所需的结果：

应用组件：

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

const App = (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 App;

索引.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'));

export default Example;

// [enter image description here][1]
serviceWorker.unregister();

Answer 5

如果您的终端没有错误，请检查您的 index.css。 很可能是全局样式模糊了呈现的元素。