ReactJS - 添加/修改無狀態功能組件的propTypes的多種方法？

Question

問題

下面的方法2如何運作？

高水平

我最近遇到了兩種不同的方法來定義無狀態函數ReactJS組件（兩者都工作正常）：

• 方法1：

  1. const Greet1 = function () {...}
  2. Greet1.propTypes = {...}
  3. export default Greet1

• 方法2：

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

方法1對我有意義：我們首先定義Greet1 ，然后添加/修改其屬性。

方法2是我沒有得到的方法。 這怎么可能，我們允許范圍內添加/修改屬性Greet2之前Greet2定義自己？

（或者它更像是JavaScript基礎知識而不是ReactJS特定的？）

細節示例

假設我有一個ReactJS GreetContainer ，用於包裝各個表示組件Greet1和Greet2 。

GreetContainer

這是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

Greet1

這是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

Greet2

這是Greet2.js - 一個（無狀態的）演示組件（我不太明白 - 在定義Greet2本身之前指定Greet2的屬性是沒有意義的嗎？）：

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默認使用Hoisting（將聲明提升到代碼頂部）。

盡管存在這種默認行為， 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函數中，聲明被提升到頂部。 所以實際上javascript對待這個：

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

像這樣：

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