React.PropTypes 自 React 15.5.0 起已弃用

Question

我正面临一个问题，我试图导入一个静态组件并在父组件中使用它。我收到 React 未定义错误。

这是我所做的 父组件

import React from 'react';
import TableHeader from 'TableHeader';
import TableRow from 'TableRow';
import UTIL from '../../services/Utils';

export default class Table extends React.Component {

    render() {
        return (<div>
            <TableHeader labels={this.props.labels}/>
            <div className="table-body js-filtered-data-wrapper sortable">
                {this.renderTableRows()}
            </div>

        </div>
        )
    }
    renderTableRows() {
        return this.props.teamlist.map((listItem, i) => {
            return (
                <TableRow key={i}
                               data={listItem}
                               labels={this.props.labels}
                />
            )
        });
    }
}

在我的 TableHeader 文件中，代码是

import { PropTypes } from 'react';

const TableHeader = (props) => {
    let labels = props.labels;
    return (
        <ul className="table-header">
            <li className="table-row header ">
                <div className="player-name">{labels.playername}</div>
            </li>
        </ul>
    )
}

TableHeader.propTypes = {
    labels : PropTypes.object.isRequired
}

export default TableHeader;

我得到的错误是

Uncaught ReferenceError: React is not defined
    at TableHeader (webpack:///./src/components/pro-am/TableHeader.jsx?:13)

Answer 1

Imoprt React 也在 TableHeader 组件中：

注意：在最新版本的React 中，PropTypes 已被移动 到一个单独的包（prop-types）。所以从那里导入它就像

import React,{ PropTypes } from 'react';

const TableHeader = (props) => {
    let labels = props.labels;
    return (
        <ul className="table-header">
            <li className="table-row header ">
                <div className="player-name">{labels.playername}</div>
            </li>
        </ul>
    )
}

TableHeader.propTypes = {
    labels : PropTypes.object.isRequired
}

export default TableHeader;

如果使用 v15.5.0 或更高版本，请使用单独包中的 PropTypes

import React from 'react';
import PropTypes from 'prop-types';

const TableHeader = (props) => {
    let labels = props.labels;
    return (
        <ul className="table-header">
            <li className="table-row header ">
                <div className="player-name">{labels.playername}</div>
            </li>
        </ul>
    )
}

TableHeader.propTypes = {
    labels : PropTypes.object.isRequired
}

export default TableHeader;