react HOC中的@是什么？

Question

索引.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>
    );
  }
}

连接到DatoCms.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.index.jsx导入React从'react'导入{ render }从'react-dom'导入Main从'.Main'window.DatoCmsPlugin.init((插件=> {插件=> {插件=&gt.

Answer 1

@connectToDatoCms 使用装饰器模式。

在你的代码中，你的webpack配置被设置为处理装饰符，可能使用了 babel-plugin-transform-decorators

装饰公司与HOCs类似

Decorators 只是一个函数的包装器。它们用于增强函数的功能，而不修改底层函数。

在当前的HOC语法模式下，上述内容可以被用作

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);