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>

接下来给出了对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。有人可以帮忙吗？

Answer 1

propTypes属于类组件，如下所示：

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

Answer 2

这是因为组件中有两个根节点。用'div'元素包装它

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

2 个答案: