javascript - 如何将 HTML 页面添加到 React 应用程序

Question

我使用最新版本的 React.js 创建了简单的应用程序。我的 App.js 文件如下所示:

import React, { Component } from 'react';
import './App.css';
import "../node_modules/bootswatch/superhero/bootstrap.css";
import { Navbar, NavItem, Nav, Grid, Row, Col } from "react-bootstrap";
import HTMLDocument from '../node_modules/react-html-document';
import ReactDOMServer from '../node_modules/react-dom/server';

const PLACES = [
    { name: "Almaty", zip:"94303" },
    { name: "Karaganda", zip:"77777" },
    { name: "Astana", zip:"76423" },
    { name: "Oskemen", zip:"63452" }
];


class App extends Component {
    constructor() {
    super();
    this.state = {
        activePlace: 0,
    };
}
  render() {
      const activePlace = this.state.activePlace;
    return (
        <div>
            <Navbar>
                <Navbar.Header>
                    <Navbar.Brand>
                Android Application Development
                    </Navbar.Brand>
                </Navbar.Header>
            </Navbar>
        <Grid>
            <Row>
                <Col md={4} sm={4}>
                    <h3>Select a city</h3>
                    <Nav
                        bsStyle="pills"
                        stacked
                        activeKey={activePlace}
                        onSelect={index => {
                            this.setState({ activePlace: index });
        }}
    >
        {PLACES.map((place, index) => (
            <NavItem key={index} eventKey={index}>{place.name}</NavItem>
         ))}
         </Nav>
    </Col>
    <Col md={8} sm={8}>
        <WeatherDisplay key={activePlace} zip={PLACES[activePlace].zip} />
    </Col>
</Row>
</Grid>
</div>
    );
  }
}


class WeatherDisplay extends Component {
    constructor() {
        super();
        this.state = {
            weatherData: null
        };
    }
    componentDidMount() {
        const zip = this.props.zip;
        const URL = "http://api.openweathermap.org/data/2.5/weather?q=" +
              zip + "&appid=b1b35bba8b434a28a0be2a3e1071ae5b&units=imperial";
        fetch(URL).then(res => res.json()).then(json => {
            this.setState({ weatherData: json});
        });
    }
    render() {
        const weatherData = this.state.weatherData;
        if (!weatherData) return <div>Loading</div>;
        const weather = weatherData.weather[0];
        const iconUrl = "http://openweathermap.org/img/w/" + weather.icon + ".png";
return ( 
  <div>
    <h1>
      {weather.main} in {weatherData.name}
      <img src={iconUrl} alt={weatherData.description} />
    </h1>
    <p>Current: {weatherData.main.temp}°</p>
    <p>High: {weatherData.main.temp_max}°</p>
    <p>Low: {weatherData.main.temp_min}°</p>
    <p>Wind Speed: {weatherData.wind.speed} mi/hr</p>
  </div>
);
    }
}

export default App;

一切都很好!但现在我发现了一个非常棒的主页(仅限 HTML + CSS)。我想首先添加主页(主页包含主菜单)，然后如果我单击任何按钮，我可以转到我的 App.js 文件。我该如何执行该操作？

抱歉，我是 JavaScript 和 React.js 的新手

Answer 1

让主页成为用户首先看到的内容。然后制作一个带有 div 的新页面，并将您的 React 应用程序应用于该 div。您需要做的就是制作一个新页面，并在其上呈现 React。

制作一个新的 HTML 页面。当您的用户访问您的站点时，首先呈现新的 HTML 页面……就像您现在呈现 react 页面的方式一样。然后创建一个新页面并将您的 react 正在呈现的 div 移动到该新页面。

然后在指向第二页的第一页上添加一个 anchor 标记，并将用户路由到那里。