使用react創建單頁面項目
react創建單頁面項目並且組件傳值
首先在app.js中配置路由,這里是通過react-router-dom這個自帶的組件完成的
定義一個class類在里面進行單頁面的創建,並且此文件還可以創建其他的頁面以及多個單頁面項目
import React, { Component } from 'react';
import { BrowserRouter as Router , Route, Switch} from 'react-router-dom'
import home './components/home/home.js'
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route strict path="/xxx/home" component={home} />
</Switch>
</Router>
)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
然后在home.js文件中
主要是通過Router組件進項渲染,
在渲染的過程中, 如果要給子組件傳值,必須要寫成render方法渲染子組件才可以正確傳值
<Route strict path="/pxr/home/search" render={() => {
return <Search list={this.state.searchList}></Search>
}} />
1
2
3
組件傳值
如果要由子組件給父組件傳值 , 同樣也需要寫成render方法渲染, 然后在子組件標簽上添加一個方法,在子組件中通過this.props.方法名()觸發
// 父組件
<Route strict path="/pxr/home/home" render={() => {
return <HomePage getChildMsg={this.handleMsg} />
}} />
// 子組件
this.props.getChildMsg(item)
1
2
3
4
5
6
7
下面是全部代碼, 希望對大家有幫助
import React, { Component } from 'react'
import search from '../images/pxr3.png'
import { BrowserRouter as Router , Route, Link} from 'react-router-dom'
import HomePage from './homePage'
import SmallLoan from './SmallLoan'
import Search from './Search'
import DistailPage from './DistailPage'
import { message } from 'antd';
class Mouth extends Component {
constructor (props) {
super (props)
this.state = {
disName: '',
search: '',
searchList: []
}
}
componentWillMount () {}
componentWillReceiveProps (newProps) {}
// 設置搜索值
setSearch = (e) => {}
// 搜索功能
toSearch = async (e) => {}
// 重置種類標簽
backHome = () => {}
// 設置種類標簽
handleMsg = (msg) => {}
render () {
return (
<div className='mouth'>
<Router>
<div>
<div className="mouth_head">
<div className="mouth_img">
<Link to="/pxr/home/home" onClick={this.backHome}><img src={require('../images/logo1.png')} alt=""/></Link>
<span >{this.state.disName}</span>
</div>
<div className="mouth_inp">
<input style={img1} type="text" value={this.state.search} onChange={this.setSearch} placeholder="請輸入搜索信息" />
<Link to="/pxr/home/search" onClick={(e)=>this.toSearch(e)} ><button>搜 索</button></Link>
</div>
</div>
<Route strict path="/pxr/home/home" render={() => {
return <HomePage getChildMsg={this.handleMsg} />
}} />
<Route strict path="/pxr/home/small" component={SmallLoan} />
<Route strict path="/pxr/home/search" render={() => {
return <Search list={this.state.searchList}></Search>
}} />
<Route strict path="/pxr/home/distail" component={DistailPage} />
</div>
</Router>
</div>
)
}
}
export default Mouth
原文鏈接：https://blog.csdn.net/weixin_45289067/article/details/95048225