JavaScript語法反應路線

我要在這裏做出反應路由器代碼：modal-gallery JavaScript語法反應路線

和跨越這句法

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

來源

2017-12-18 Dan

這就是所謂的解構賦值。 – Li357

請注意，這不是JavaScript;並且可能還需要使用[tag：jsx]添加標籤（即使您最終要詢問的現象在JavaScript和JSX中都可用）。 – Amadan

它是一個無狀態作出反應功能部件（陣營SFC）。這是一個功能，而不是一個班級。

基本上你不需要/不得不將它轉換成React.Component類，因爲它是聲明React.Component的有效方法。

SFC通常被稱爲愚蠢組件，因爲它只關心傳遞給它的道具，但沒有別的。它是一個純粹的組件（它不應該有任何內部狀態），也不應該從其生命週期函數中產生任何副作用。

React建議如果您不需要內部狀態，也不需要組件的生命週期方法，則應該將其作爲SFC編寫。

你可以有進一步的看這裏：

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

來源

2017-12-18 04:47:43

這是一個純函數。你可以把它看作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> 
    ) 
    } 
}

來源

2017-12-18 04:43:37 klugjo

JavaScript語法反應路線

回答

相關問題