что такое @ в реакции HO C? - PullRequest
Новая
       27

что такое @ в реакции HO C?

2 голосов
/ 05 мая 2020

index.jsx 

import React from 'react'
import { render } from 'react-dom'

import Main from './Main'

window.DatoCmsPlugin.init((plugin) => {
  plugin.startAutoResizer()

  const container = document.createElement('div')
  document.body.appendChild(container)

  render(<Main plugin={plugin} />, container)
})

Main.jsx 

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import connectToDatoCms from './connectToDatoCms';
import './style.sass';

@connectToDatoCms(plugin => ({
  developmentMode: plugin.parameters.global.developmentMode,
  fieldValue: plugin.getFieldValue(plugin.fieldPath),
}))

export default class Main extends Component {
  static propTypes = {
    fieldValue: PropTypes.bool.isRequired,
  }

  render() {
    const { fieldValue } = this.props;

    return (
      <div className="container">
        {JSON.stringify(fieldValue)}
      </div>
    );
  }
}

connectToDatoCms.jsx 

import React, { Component } from 'react'

export default mapPluginToProps => BaseComponent => (
  class ConnectToDatoCms extends Component {
    constructor (props) {
      super(props)
      this.state = mapPluginToProps(props.plugin)
    }

    componentDidMount () {
      const { plugin } = this.props

      this.unsubscribe = plugin.addFieldChangeListener(plugin.fieldPath, () => {
        this.setState(mapPluginToProps(plugin))
      })
    }

    componentWillUnmount () {
      this.unsubscribe()
    }

    render () {
      return <BaseComponent {...this.props} {...this.state} />
    }
  }
)

Я использовал эту команду для генерации стартового кода для datoCMS плагин, npx -p yo -p generator-datocms-plugin -c 'yo datocms-plugin'.

Что такое @ в @connectToDatoCms, Main.jsx.

1 Ответ

1 голос
/ 05 мая 2020

@connectToDatoCms использует шаблон декоратора.

Конфигурация вашего веб-пакета в вашем коде настроена для обработки декораторов, вероятно, с использованием babel-plugin-transform-decorators

Декораторы похожи на HOC

Decorators - это просто оболочка вокруг функции. Они используются для расширения функциональности функции без изменения базовой функции.

С текущим синтаксическим шаблоном HO C приведенное выше могло быть использовано как 

import connectToDatoCms from './connectToDatoCms';
import './style.sass';

class Main extends Component {
  static propTypes = {
    fieldValue: PropTypes.bool.isRequired,
  }

  render() {
    const { fieldValue } = this.props;

    return (
      <div className="container">
        {JSON.stringify(fieldValue)}
      </div>
    );
  }
}
const mapPluginToProps = plugin => ({
    developmentMode: plugin.parameters.global.developmentMode,
    fieldValue: plugin.getFieldValue(plugin.fieldPath),
 })
export default connectToDatoCms(mapPluginToProps)(Main);
...