Reactjs 什么是@in？

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

从“React”导入React
从'react dom'导入{render}
从“/Main”导入Main
window.DatoCmsPlugin.init（（插件）=>{
plugin.startAutoResizer（）
const container=document.createElement（'div'）
document.body.appendChild（容器）
渲染（，容器）
})

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

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“/connectToDatoCms”导入connectToDatoCms；
导入“/style.sass”；
@connectToDatoCms（插件=>({
开发模式：plugin.parameters.global.developmentMode，
fieldValue:plugin.getFieldValue（plugin.fieldPath），
}))
导出默认类主扩展组件{
静态类型={
字段值：PropTypes.bool.isRequired，
}
render（）{
const{fieldValue}=this.props；
返回(
{JSON.stringify（fieldValue）}
);
}
}

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} />
    }
  }
)

import React，{Component}来自“React”
导出默认mapPluginToProps=>BaseComponent=>(
类ConnectToDatoCms扩展组件{
建造师（道具）{
超级（道具）
this.state=mapPluginToProps（props.plugin）
}
组件安装（）{
const{plugin}=this.props
this.unsubscribe=plugin.addFieldChangeListener（plugin.fieldPath，（）=>{
this.setState（mapPluginToProps（plugin））
})
}
组件将卸载（）{
这个。取消订阅（）
}
渲染（）{
返回
}
}
)

我使用这个命令为datoCMS插件生成一个启动代码，

npx-p yo-p生成器datoCMS plugin-c'yo datoCMS plugin'

---

@connectToDatoCms

中的

@

是什么，Main.jsx.

@connectToDatoCms

使用装饰器模式

代码中的webpack配置设置为处理装饰程序，可能使用

装饰器类似于HOC

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

从“/connecttodatoms”导入connecttodatoms；
导入“/style.sass”；
类主扩展组件{
静态类型={
字段值：PropTypes.bool.isRequired，
}
render（）{
const{fieldValue}=this.props；
返回(
{JSON.stringify（fieldValue）}
);
}
}
const mapPluginToProps=插件=>({
开发模式：plugin.parameters.global.developmentMode，
fieldValue:plugin.getFieldValue（plugin.fieldPath），
})
导出默认connectToDatoCms（mapPluginToProps）（主）；

谢谢，那么它在上面的代码片段中到底做了什么呢？它实际上为主要组件添加了另一个功能，我在文章中也添加了与常规HOC相同的功能。无论何时从HOC中调用

mapPluginToProps

，都会调用传递给

@connectToDatoCms

的函数参数。。这是HOC的另一种语法