[英]How to add HTML page to React application
我使用最新版本的 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 的新手
使主頁成為用戶看到的第一件事。 然后創建一個帶有 div 的新頁面,並將您的 React 應用程序應用於該 div。 您需要做的就是創建一個新頁面,並在其上呈現 React。
創建一個新的 HTML 頁面。 當您的用戶訪問您的網站時,首先呈現新的 HTML 頁面……就像您現在呈現 React 頁面的方式一樣。 然后創建一個新頁面並將您的反應正在呈現的 div 移動到該新頁面。
然后在第一個頁面上添加一個錨標記,指向第二個頁面並將用戶路由到那里。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.