0
我嘗試使庫存清單應用程序與react和redux,但我有一個小問題需要一些瞭解它。React-Router不顯示任何東西,也沒有錯誤
我知道我們沒有辦法創建反應組件,並嘗試儘可能多地獲取所有信息,但仍不確定爲什麼會發生此問題。
我有app.js這是我所有的陣營,路由器IndexPage設置有
console.log('The application has been start...');
import React from 'react'
import { render } from 'react-dom'
import { IndexPage } from './modules/IndexPage'
import { AddItemForm } from './modules/ui/AddItemForm'
import { PageNotFound } from './modules/PageNotFound'
import { Router, Route, hashHistory } from 'react-router'
import routes from './routes'
window.React = React
render(
<Router history={hashHistory}>
<Route path='/' component={IndexPage}/>
<Route path='/add' component={AddItemForm}/>
<Route path='*' component={PageNotFound}/>
</Router>,
document.getElementById('react-container')
)
和PageNotFound路由器顯示和正確渲染,但對於加,是沒有錯誤顯示空白頁。
import { PropTypes } from 'react'
const AddItemForm = ({ onNewItem=f=>f, router}) => {
//const AddItemForm =() => {
let _itemName
const submit = e => {
e.preventDefault()
onNewItem({
itemName: _itemName.value,
itemCount: 1
})
router.push('/')
_itemName.value = ''
}
return (
<form onSubmit={submit} >something
<label htmlFor="item-name"> Name Item</label>
<input id="item-name" type="text" ref={(input) => _itemName = input } />
<button>Add Item</button>
</form>
)
}
AddItemForm.propTypes = {
onNewItem: PropTypes.func,
router: PropTypes.object
}
export default AddItemForm
,以確保有什麼問題做出反應的路由器或我做組件我改變AddItemForm與下面的代碼
export const AddItemForm =() =>
<div>
<h1>Oops ! - The page is working!</h1>
</div>
它開始正常工作,顯示有毛病我組件,但我無法理解什麼是主要問題。請給我點擊或指出問題在哪裏,或者有什麼不同?
下面是應用程序的完整源至今github上的鏈接
https://github.com/mavaj/Inventory-List
可能就是這樣。每個使用'jsx'的類都需要導入'React'(即使你沒有使用'React'本身)。 –
有趣的是,因爲我遵循你的建議,仍然有同樣的問題,這裏是我的項目的完整源代碼在github https://github.com/mavaj/Inventory-List –