• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

JavaScript语法反应路线

JavaScript 来源:Dan 6次浏览

我要在这里做出反应路由器代码:modal-galleryJavaScript语法反应路线

和跨越这句法

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


===========解决方案如下:

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

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

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

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

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

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


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)