javascript - ReactJS - 添加/修改无状态功能组件的 propTypes 的多种方法？

Question

问题

为什么下面的方法 2 有效？

高级

我最近遇到了两种不同的定义无状态函数式 ReactJS 组件的方法(都可以正常工作):

• 方法一:

  1. const Greet1 = function () {...}
  2. Greet1.propTypes = {...}
  3. 导出默认 Greet1

• 方法 2:

  1. Greet2.propTypes = {...}
  2. 导出默认函数 Greet2(){...}

方法 1 对我来说很有意义:我们从定义 Greet1 开始，然后添加/修改它的属性。

方法 2 是我不了解的方法。在定义 Greet2 本身之前，我们怎么可能被允许在 Greet2 中添加/修改属性？

(或者它更像是 JavaScript 基础知识而不是特定于 ReactJS 的？)

详细示例

假设我有一个 ReactJS GreetContainer，它包装了各个表示组件 Greet1 和 Greet2。

问候容器

这是 GreetContainer.js - 一个(可以是有状态的)包装展示组件的容器组件:

import React, { PropTypes } from 'react'
import { Greet1, Greet2 } from 'components'

const GreetContainer = React.createClass({
  render () {
    return (
      <div>
        <Greet1 message="This is Greet1"/>
        <Greet2 message="This is Greet2"/>
      </div>
    )
  },
})

export default GreetContainer

问候 1

这是 Greet1.js - 一个(无状态)展示组件(据我所知):

import React, { PropTypes } from 'react'

const Greet1 = function ({message}) {
  return (
    <div>
      <p>{message}</p>
    </div>
  )
}

Greet1.propTypes = {
  message: PropTypes.string.isRequired
}

export default Greet1

问候2

这是 Greet2.js - 一个(无状态)展示组件(我不太明白 - 指定 Greet2 对我来说没有意义)' Greet2 本身定义之前的 s 属性？):

import React, { PropTypes } from 'react'

Greet2.propTypes = {
  message: PropTypes.string.isRequired
}

export default function Greet2 ({message}) {
  return (
    <div>
      <p>{message}</p>
    </div>
  )
}

更新 - 关于 JavaScript 提升

下面提供的答案表明方法 2 可行，因为 JavaScript 默认使用提升(将声明提升到代码顶部)。

尽管有这种默认行为，W3Schools JavaScript - Hoisting说在使用变量之前声明变量是一种很好的做法。所以我创建了 Greet3(经过测试和工作)——我想这可能是比 Greet1 和 Greet2 更好的模式。

import React, { PropTypes } from 'react'

function Greet3 ({message}) {
  return (
    <div>
      <p>{message}</p>
    </div>
  )
}

Greet3.propTypes = {
  message: PropTypes.string.isRequired
}

export default Greet3

Answer 1

在 javascript 函数声明中是 hoisted到顶部。所以实际上 javascript 是这样处理的:

Greet2.propTypes = {...}
export default function Greet2 () {...}

像这样:

function Greet2 () {...}
Greet2.propTypes = {...}
export default Greet2;