JavaScript语法反应路线

它是一个无状态作出反应功能部件（阵营SFC）。这是一个功能，而不是一个班级。

基本上你不需要/不得不将它转换成React.Component类，因为它是声明React.Component的有效方法。

SFC通常被称为愚蠢组件，因为它只关心传递给它的道具，但没有别的。它是一个纯粹的组件（它不应该有任何内部状态），也不应该从其生命周期函数中产生任何副作用。

React建议如果您不需要内部状态，也不需要组件的生命周期方法，则应该将其作为SFC编写。

你可以有进一步的看这里：

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

这是一个纯函数。你可以把它看作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> 
    ) 
    } 
}