양식 입력을 React 구성 요소에 전달하는 중 오류가 발생했습니다.

Question

저는 여러 가지 작은 문제에 대해 React와 Facebook 문서를 자주 읽는 것에 익숙합니다. 하나는 현재와 함께 붙어 있고 대답을 찾을 수 없습니다이 - 나는 그의 입력을 내가 React 구성 요소에 전달하려고하는 양식이 있습니다. 이 양식은 부분적으로 다음과 같습니다

이

<fieldset class="form-group"> 
    <div class="col-xs-4"> 
     <label>Age</label> 
     <input type="text" class="form-control" id="age"> 
    </div> 
    <div class="col-xs-4"> 
     <label>Height</label> 
     <input type="text" class="form-control" id="height"> 
    </div> 
    <div class="col-xs-4"> 
     <label>Weight</label> 
     <input type="text" class="form-control" id="weight"> 
    </div> 
</fieldset> 
<div id="container"></div> 

이 반작용 구성 요소에 대한 내 호출이 다음 주어진다 :

이

import ReactDOM from 'react-dom'; 
import React from 'react'; 
import {ProfileList} from './react/components/list.jsx'; 

ReactDOM.render(
    <ProfileList age={document.getElementById('age').value} height={document.getElementById('height').value} weight={document.getElementById('weight').value} , 
    document.getElementById('container') 
); 

마지막으로, 내 구성 요소 (부분적으로) :

export class ProfileList extends React.Component { 
    ... 
    render() { 
     ProfileList.propTypes = { 
      age: React.PropTypes.number, 
      height: React.PropTypes.number, 
      weight: React.PropTypes.number 
     }; 
     return (
      ... 
     ); 
    } 
} 

내가 Unexpected token를 얻을 수 jsx 파일 (ProfileList 구성 요소 코드가 있음)을 파싱하는 동안. 아무도 도와 줄 수 있습니까?

Answer 1

propTypes이 같은 클래스 구성 요소에 속하는 : 당신이 당신의 구성 요소에 두 개의 루트 노드를 가지고 있기 때문에

class ProfileList { ... } 
ProfileList.propTypes = { ... } 
export ProfileList; 

Answer 2

그것입니다. 'div'요소로 감싸기