将表单输入传递给 React 组件时出错答案

【问题标题】：Error in passing form input to React components将表单输入传递给 React 组件时出错
【发布时间】：2016-06-10 22:23:12
【问题描述】：

我对 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>

接下来是我对 React 组件的调用：

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 (
            ...
        );
    }
}

我在解析 jsx 文件（其中包含 ProfileList 组件代码）时得到一个Unexpected token。有人可以帮忙吗？

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

propTypes 属于这样的类组件：

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

【讨论】：

【解决方案2】：

这是因为您的组件中有两个根节点。将其包裹在 'div' 元素中

【讨论】：