Question

最小示例：

import React from 'react';
import ReactDOM from 'react-dom';


const decorator = context => WrappedComponent => <WrappedComponent context={context}/>;

@decorator(1)
class Parent extends React.Component {
    render(){
        return 1;
    }
}

ReactDOM.render(<Parent />, document.getElementById('app-root'));

错误：

react.development.js：225警告：React.createElement：类型无效   -预期使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：。你是不是偶然   导出JSX文字而不是组件？

react-dom.development.js：55未捕获的错误：元素类型无效：   预期的字符串（用于内置组件）或类/函数（用于   复合组件），但得到了：对象。

当我从组件顶部移除装饰器时，一切正常。

babel配置：

"plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]

我的装饰器有什么问题？

Answer 1

返回JSX代码不是有效的表达式，您应该尝试将此类包装。

const decorator = (providedContext) => (WrappedComponent) => {
   return class extends React.Component {

      componentDidMount() {

      }
      render() {
         return <WrappedComponent context={providedContext}/>
      }
   }
}

装饰器为什么会抛出无效类型的错误

1 个答案: