javascript - 将带有 "static get defaultProps()"的 React 类转换为功能组件

Question

当我对现有的 React 类组件进行代码更改时，我已经将它们转换为带有钩子(Hook)的功能组件。我们提供了带有 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

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

您可以尝试不对需要 i18n 的属性使用 props，或者使用这些值作为后备，以防 prop 未定义:

例如

<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