Question

假设React类被定义为纯函数，如in this article和in this question所述。例如：

const Text = ({children}) =>
  <p>{children}</p>

而不是

class Text extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

定义为纯渲染函数的组件是否仍可以进行装饰？

例如，我可以使用connect中的react-redux和bindActionCreators中的redux来修饰课程：

@connect(
  state => someSelectors(state),
  dispatch => bindActionCreators(someActions, dispatch)
)
class Text extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

export default Text;

装饰作为纯函数编写的版本会按预期工作吗？特别是，这将起作用：

//Text.js

const Text = ({children}) =>
  <p>{children}</p>

export default connect(
  state => someSelectors(state),
  dispatch => bindActionCreators(someActions, dispatch)
)(Text);

当我尝试编译一些像上面示例中实现的代码时，我从index.js中的ESLint收到import/no-named-as-default-member错误，试图导入导出的修饰函数：

//index.js
import Text from 'Text.js'; // <= error: import/no-named-as-default-member

Babel转换器似乎应该可以decorating functions in JavaScript。但即使该功能正确装饰，React仍然会正确使用它吗？ ESLint错误有点令人担忧。

是否可以修饰一个写为纯渲染函数的反应类？

0 个答案: