将带有"static get defaultProps()“的React类转换为函数组件

Question

当我对现有的React类组件进行代码更改时，我一直在将它们转换为带有钩子的功能组件。我们提供了带有defaultProps的组件，这些组件的标签为18n。i18n()函数中的值是通过REST调用加载的，因此在加载文件时不能调用它们，所以我们必须这样做，以便在创建实例时加载它们：

  static get defaultProps() {
    return {
      open: false,
      title: i18n('confirm.title'),
      message: i18n('confirm.message'),
      confirmButtonText: i18n('confirm.confirmBtn'),
      cancelButtonText: i18n('confirm.cancelBtn'),
      callback: noop
    };
  }

显然，将此场景转换为功能组件并执行此操作是行不通的，因为i18n()的值还不可用。

Confirm.defaultProps = {
  open: false,
  title: i18n('confirm.title'),
  message: i18n('confirm.message'),
  confirmButtonText: i18n('confirm.confirmBtn'),
  cancelButtonText: i18n('confirm.cancelBtn'),
  callback: noop
};

关于如何将这些类组件转换为创建组件时需要调用i18n()的函数式组件，您有什么想法吗？

Answer 1

在功能组件中使用默认属性将被弃用(https://github.com/facebook/react/pull/16210)。当你实际使用它们的时候，你应该会看到一个警告。

您可以尝试不对需要i18n的属性使用属性属性，也可以在属性未定义的情况下使用这些值作为备用：

例如：

<div>{props.title || i18n('confirm.title')}</div>

功能组件的替代方案是使用解构的ES6默认参数-但我不确定这是否对您的情况有帮助。

function MyComponent({title = i18n('confirm.title')}) {
...
}

你的i18n函数是异步的吗？在这种情况下，我建议您应该将其替换为呈现消息的组件，因为即使在最初呈现时，这些组件也可能不可用(即使在大多数情况下它们是可用的)。

LE:这是关于这个话题的相关讨论：https://github.com/yannickcr/eslint-plugin-react/issues/1009

Answer 2

这应该是可行的：

Object.defineProperty(Confirm, 'defaultProps', { 
  get() {
    return {
      open: false,
      title: i18n('confirm.title'),
      message: i18n('confirm.message'),
      confirmButtonText: i18n('confirm.confirmBtn'),
      cancelButtonText: i18n('confirm.cancelBtn'),
      callback: noop
    }; 
  },
  enumerable: true 
});

这将允许您为该属性提供一个getter函数，就像您在代码的类版本中获得的一样。