Question

我之前使用的是函数式Javascript，最近我开始使用面向对象的Javascript和React Library。这个问题更多的是理解代码。

为什么以下代码不起作用

class MyComponent extends React.Component{

    propTypes : {
      name: React.PropTypes.string.isReequired,
      location: React.PropTypes.string
    }

    render(){
      return(
        <h1>Hello This is {this.props.name} and I live in 
        {this.props.location}</h1>
      );
    }
  }

  ReactDOM.render(
    <MyComponent name="Node" location="DOM"/>,
    document.getElementById('root')
  );

虽然此代码有效，但

class MyComponent extends React.Component{
    render(){
      return(
        <h1>Hello This is {this.props.name} and I live in {this.props.location}</h1>
      );
    }
  }

  MyComponent.propTypes = {
    name: React.PropTypes.string.isReequired,
    location: React.PropTypes.string
  }

  ReactDOM.render(
    <MyComponent name="Node" location="DOM"/>,
    document.getElementById('root')
  );

有人可以帮助我理解这个吗？感谢。

Answer 1

在ES6类中，静态属性看起来像这样

class X extends Y {
    static staticThing = {
        ...    
    }
}

请注意=

＆＃34;分配＆＃34;一个静态属性ES5方式看起来就像你拥有它的第二种方式

通常，您将第二种方式用于功能组件，而您也可以使用第一种方式（尽管适用于=）用于ES6样式类组件。

另外，请确保您的React.PropTypes正确无误 - isReequired应为isRequired

Answer 2

您需要使用static字（来定义静态属性），因为propTypes需要在class本身上声明，而不是在class的实例上声明}，并使用=。

检查DOC。

像这样：

static propTypes = {
    name: React.PropTypes.string.isRequired,
    location: React.PropTypes.string
}

在Component之外反映propTypes

2 个答案: