將表單輸入傳遞給React組件時出錯

我對React完全陌生，因爲各種小問題而頻繁瀏覽Facebook文檔。一個我目前堅持和無法找到答案是這樣的 - 我有一個表單，其輸入我想傳遞給一個React組件。形式部分如下圖所示：將表單輸入傳遞給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組件代碼）。任何人都可以幫忙嗎？

來源

2016-06-10 user3033194

的propTypes屬於類成分是這樣的：

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

來源

2016-06-10 12:35:38 arisalexis

這是因爲你有你的組件兩個根節點。將它裹在'div'元素中

來源

2016-06-10 14:23:12 Foker

將表單輸入傳遞給React組件時出錯

回答

相關問題