极客观点
项目管理
HarmonyOS
router01.js
import React from 'react'
import { Router, Route, Link } from 'react-router'
const App = React.createClass({/*...*/})
const About = React.createClass({/*...*/})
// 等等。
const Users = React.createClass({
render() {
return (
<div>
<h1>Users</h1>
<div className="master">
<ul>
{/* 在应用中用 Link 去链接路由 */}
{this.state.users.map(user => (
<li key={user.id}><Link to={`/user/${user.id}`}>{user.name}</Link></li>
))}
</ul>
</div>
<div className="detail">
{this.props.children}
</div>
</div>
)
}
})
const User = React.createClass({
componentDidMount() {
this.setState({
// 路由应该通过有用的信息来呈现，例如 URL 的参数
user: findUserById(this.props.params.userId)
})
},
render() {
return (
<div>
<h2>{this.state.user.name}</h2>
{/* 等等。 */}
</div>
)
}
})
// 路由配置说明（你不用加载整个配置，
// 只需加载一个你想要的根路由，
// 也可以延迟加载这个配置）。
React.render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About}/>
<Route path="users" component={Users}>
<Route path="/user/:userId" component={User}/>
</Route>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.body)index.html
<!DOCTYPE html><html>
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id="app"></div>
<div id="app01"></div>
<div id="app02"></div>
<div id="app03"></div>
<div id="app04"></div>
<div id="app05"></div>
<div id="app06"></div>
<div id="app07"></div>
<div id="app08"></div>
<script src="bundle.js"></script>
</body></html>项目地址如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 文档兼容模式的定义 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 优先使用webkit内核渲染页面 -->
<meta name="renderer" content="webkit">
<!-- 设置可视区域宽度与设备屏幕缩放比例为1.0 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>数据运管平台</title>
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="static/main.css"/>
</head>
<body>
<div id="root" style="height: 100%;"></div>
<script src="app.config.js"></script>
<script src="config/ENV_CONFIG_LOCAL.js"></script>
<script src="static/vender.js"></script>
<script src="static/main.js"></script>
</body>
</html>项目地址如下
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
const Counter = ({ value })=>(
<div>
<h1>{value}</h1>
<button onClick={onIncrement}>+</button>
<button onClick={onDecrement}>-</button>
</div>
);
const reducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
default: return state;
}
};
const store = createStore(reducer);
class renderCounter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
<Counter
value={store.getState()}
onIncrement={() => store.dispatch({type: 'INCREMENT'})}
onDecrement={() => store.dispatch({type: 'DECREMENT'})}
/>
}
componentDidMount() {
// componentDidMount 组件渲染完成，已经出现在dom文档里
store.subscribe(render);
}
}
如果使用 router 的话，首页就仅使用路由的声明文件就好了