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的新页面，并将您的反应应用程序应用于该div。您需要做的就是创建一个新页面，并在其上呈现反应。

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

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

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

1 个答案: