JavaScriptのシンタックスは、私がここに反応するルータコードに行っていたルート

Question

を反応させる：modal-gallery

と、この構文に出くわした

const Modal = ({ match, history }) => { 
    const image = IMAGES[parseInt(match.params.id, 10)] 
    if (!image) { 
    return null 
    } 
    const back = (e) => { 
    e.stopPropagation() 
    history.goBack() 
    } 
    return (
    <div 
     onClick={back} 
     style={{ 
     position: 'absolute', 
     top: 0, 
     left: 0, 
     bottom: 0, 
     right: 0, 
     background: 'rgba(0, 0, 0, 0.15)' 
     }} 
    > 
     <div className='modal' style={{ 
     position: 'absolute', 
     background: '#fff', 
     top: 25, 
     left: '10%', 
     right: '10%', 
     padding: 15, 
     border: '2px solid #444' 
     }}> 
     <h1>{image.title}</h1> 
     <Image color={image.color} /> 
     <button type='button' onClick={back}> 
      Close 
     </button> 
     </div> 
    </div> 
) 
} 

私の質問は、このどのようなタイプの構文のですか？これをどのように変換しますかES6 React.Component class

Answer 1

それが反応ステートレス機能コンポーネント（SFCに反応）です。それはクラスではなく関数です。

React.Componentを宣言する有効な方法であるため、基本的にReact.Componentクラスに変換する必要はありません。React.Componentクラスに変換する必要はありません。

SFCは通常、渡された小道具だけを気にしますが、それ以外は何もしないため、ダムコンポーネントと呼ばれています。純粋な（内部状態を持たない）コンポーネントであり、ライフサイクル機能から何らかの副作用が出ることもありません。

Reactでは、コンポーネントで内部状態やライフサイクルメソッドを必要としない場合は、SFCとして記述することをお勧めします。

あなたは、さらにここを見て持つことができます。

https://reactjs.org/docs/components-and-props.html

Answer 2

これは純粋な関数です。あなたはReact.Componentのrender関数として見ることができます。それを変換

は、関数をレンダリング内だけのコードを貼り付け、容易になる：

class Modal extends React.Component { 
    render() { 
    const { match, history } = this.props; // Here you get your props 
    const image = IMAGES[parseInt(match.params.id, 10)] 
    if (!image) { 
     return null 
    } 
    const back = (e) => { 
     e.stopPropagation() 
     history.goBack() 
    } 
    return (
     <div 
     onClick={back} 
      style={{ 
      position: 'absolute', 
      top: 0, 
      left: 0, 
      bottom: 0, 
      right: 0, 
      background: 'rgba(0, 0, 0, 0.15)' 
     }} 
     > 
     <div className='modal' style={{ 
     position: 'absolute', 
      background: '#fff', 
      top: 25, 
      left: '10%', 
      right: '10%', 
      padding: 15, 
      border: '2px solid #444' 
     }}> 
      <h1>{image.title}</h1> 
      <Image color={image.color} /> 
      <button type='button' onClick={back}> 
      Close 
      </button> 
     </div> 
     </div> 
    ) 
    } 
}