what is # in react HOC? - reactjs

Question

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} />
}
}
)
I used this command to generate a starter code for datoCMS plugin, npx -p yo -p generator-datocms-plugin -c 'yo datocms-plugin'.
What is # in #connectToDatoCms, Main.jsx.

Answer 1

#connectToDatoCms uses the decorator pattern.
Your webpack config in your code is setup to process decorators, probably using babel-plugin-transform-decorators
Decorators are similar to HOCs
Decorators are just a wrapper around a function. They are used to enhance the functionality of the function without modifying the underlying function.
With the current HOC syntax pattern the above could have been used as
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);