2017-01-23 5 views
0

반응 목록과 인출액으로 인벤토리 목록 앱을 만들려고합니다. 그러나 그것에 대해 약간의 이해가 필요합니다.React-Router는 아무 것도 표시하지 않고 오류도 표시하지 않습니다.

나는 반응하는 성분을 만들고 가능한 한 모든 정보를 얻으 려하지만이 이슈가 왜 일어나는지 확실하지 않다는 것을 알고 있습니다.

나는 나의 모든 반작용-라우터 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 올바르게 렌더링, 그러나 추가에 대한 오류없이 빈 페이지가 표시되는 app.js 있습니다. 확인하기 위해

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 

함께 뭔가 잘못이다 - 반작용 라우터 또는 내가 만든 구성 요소가 나는 일반적으로 작업을 시작 코드 아래

export const AddItemForm =() => 
    <div> 
     <h1>Oops ! - The page is working!</h1> 
    </div> 

으로 AddItemForm 변경에 문제가 내 구성 요소가 있지만 주요 문제는 무엇인지 이해할 수 없습니다. 제게 명중을 부탁하거나 문제가 어디에 있는지 또는 다른 점이 무엇인지 알려주십시오. 여기

https://github.com/mavaj/Inventory-List

답변

0

나는이 문제를 재현하려고 지금까지 응용 프로그램의 전체 소스에 대한 github에의 링크입니다. 내가 알아 낸 것은 PropTypes과 함께 구성 요소에 React을 가져와야한다는 것입니다.

그래서 당신 AddItemForm 구성 요소에 React

import React, { PropTypes } from 'react' 

을 가져보십시오. 그 다음 나를 위해 일했다.

+0

아마도 그럴 수도 있습니다. 'jsx'를 사용하는 모든 클래스는'React' 자체에서 다른 것을 사용하지 않아도'React'를 가져와야합니다. –

+0

나는 당신의 제안을 따르고 여전히 같은 이슈를 가지고 있기 때문에 흥미 롭다. 여기 github에서 내 프로젝트의 전체 소스가있다. https://github.com/mavaj/Inventory-List –