react属性

Question

react新手。关于react属性有点不明白：

class MyComponent extends React.Component {
    this.displayName = 'MyComponent';
}  

MyComponent.displayName = 'MyComponent';  

MyComponent.defaultProps = {  
    displayName : 'MyComponent' 
}

三个displayName 都是react的属性吗？是同一个属性吗？或者有什么区别？

Answer 1

class是构造函数的ES6写法，实际上和function MyComponent是一样的。
第一种写法我试了一下，是会报错的SyntaxError:Unexpected token；
第二种和第三种写法都是是为构造函数添加一个共有静态属性。defaultProps比较特别，react组件如果没有某个props，就会从这里面读取。
在class里面定义属性的写法一般是这样的：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

Answer 2

第一种第二种想表达的意思我想是一致的，是想在该类组件中添加一个对象，值是"MyComponent"。但这种写法会报语法错误，这个我建议你看看 ECMAScript 6的class，很快就能理解。

第三种的意思就不同了，是想在该类组件中给一个默认的参数。
像这样：

class Sun extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1>{this.props.displayName}</h1>;
  }
}

export default class Father extends React.Component {
  render() {
    return <Sun />; //这里如果是 <Sun displayName="React"/> 最终输出的就是React
  }
}

Sun.defaultProps = {
  displayName: "MyComponent" //如果没有传参，就是该值了。
};