[英]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.