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

它是React无状态功能组件（React SFC）。它是一个功能，而不是一个类。

基本上，您不需要/必须将其转换为React.Component类，因为它是声明React.Component的有效方法。

SFC通常被称为哑组件，因为它只关心传递给它的道具而不是其他任何东西。它是一个纯粹的组件（它不应该具有任何内部状态），也不应该从其生命周期功能中产生任何副作用。

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

您可以在这里进一步了解：

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

Answer 2

这是一个纯粹的功能。您可以将其视为render的{{1}}函数。

转换它然后变得简单，只需将代码粘贴到渲染函数中：

React.Component

JavaScript语法反应路由

2 个答案: