具有Typescript的React.lazy()

时间:2019-05-02 08:55:33

标签: reactjs typescript

我得到了错误:

  

类型“元素”中缺少属性“默认”,但类型中必需   '{默认值:ComponentType; }'。ts(2322)

   {React.lazy(() => import(`../../i18n/locales/${this.props.lang}`).then(o => (
              <CustomSelects
                options={o.option}
                formattedMessageId="createroom_genre"
                value={this.props.genre}
                handleValueChange={this.handleGenreChange}
              />
            ))) }

我读了person,但是,我不知道该怎么做。

让我知道是否需要更多信息。 谢谢。

1 个答案:

答案 0 :(得分:1)

不应在使用组件时就地声明组件,这可能会终止优化并可能导致无限循环。

React.lazy旨在与动态import一起使用,回调函数应该返回模块(即{ default: Component }对象)的承诺,但当前它返回React元素的承诺

React.lazy并不是要参数化的,它不接受props并且this.props.lang不能在那里工作。应该用另一个组件包裹起来以接收道具:

const LocalCustomSelects = React.memo(({ lang }) => {
  const Lazy = React.lazy(async () => {
    const o = await import(`../../i18n/locales/${lang}`);
    return { default: props => <CustomSelects ... /> };
  });

  return <Lazy/>;
});