Question

我的2个文件：

应用

import React, { Component } from 'react';
import { NICE, SUPER_NICE } from './colors';
import Counter from './counter';

export class App extends Component {
  render() {
    return (
      <div>
        <Counter increment={ 1 } color={ NICE } />
        <Counter increment={ 5 } color={ SUPER_NICE } />
      </div>
    );
  }
}

计数器：

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
    this.interval = setInterval(() => this.tick(), 1000);
  }

  tick() {
    this.setState({
      counter: this.state.counter + this.props.increment
    });
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <h1 style={ { color: this.props.color } }>
        Counter ( { this.props.increment } ): { this.state.counter }
      </h1>
    );
  }
}

Counter.defaultProps = {
  increment: 0,
  color: null
};

Counter.propTypes = {
  increment: React.PropTypes.number.isRequired,
  color: React.propTypes.string.isRequired
};


module.exports = Counter;

我正在使用：

"react": "^0.14.0-rc1",
"eslint": "^1.3.1",
"eslint-config-airbnb": "^0.1.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^3.0.0"

我需要声明propTypes以满足eslint，但是我收到了一个运行错误：

＆＃34;未捕获的TypeError：无法读取属性＆＃39; string＆＃39;未定义＆＃34;。

有没有人看到我的错误？

非常感谢！

Answer 1

在计数器propTypes上，“color”React.PropTypes应该大写。

Counter.propTypes = {
  increment: React.PropTypes.number.isRequired,
  color: React.PropTypes.string.isRequired
};

Answer 2

我遇到与React.PropTypes类似的问题，因为我使用的是React-16，我发现不支持React.PropTypes。因此，您需要使用

安装"prop-types": "^15.6.0"

npm install prop-types --save

然后导入它，如下所示

import PropType from 'prop-types'

我在导入时犯了一个错误，而不是prop-types我导入了prop-type这对我来说是个问题。

发布作为答案，以便其他人可以了解更新的包以及如何安装等。

ReactJs - Uncaught TypeError：无法读取属性＆＃39; string＆＃39;未定义的

2 个答案: