4

我正在尝试使用react-with-styles和Aphrodite在 Typescript 中设置我的样式。我正在使用此代码，模拟来自https://github.com/airbnb/react-dates#interfaces的代码：react-dates DayPickerRangeController

const ThemedStyleSheet = require('react-with-styles/lib/ThemedStyleSheet').default
const aphroditeInterface = require('react-with-styles-interface-aphrodite').default
const DefaultTheme = require('react-dates/lib/theme/DefaultTheme').default

ThemedStyleSheet.registerInterface(aphroditeInterface)
ThemedStyleSheet.registerTheme(DefaultTheme)

// Importing react-dates after registering the theme, as per the docs.
import * as ReactDates from 'react-dates'

但是，当我运行它时，我在控制台中收到此运行时错误：

Cannot read property 'createLTR' of undefined
TypeError: Cannot read property 'createLTR' of undefined
    at Object.createLTR (http://localhost:6006/static/preview.bundle.js:133281:47)
    at createStyles (http://localhost:6006/static/preview.bundle.js:9710:59)
    at WithStyles.maybeCreateStyles (http://localhost:6006/static/preview.bundle.js:9805:22)
    at WithStyles.componentWillMount (http://localhost:6006/static/preview.bundle.js:9739:20)
    at callComponentWillMount (http://localhost:6006/static/preview.bundle.js:42214:16)
    at mountClassInstance (http://localhost:6006/static/preview.bundle.js:42310:7)
    at updateClassComponent (http://localhost:6006/static/preview.bundle.js:43679:9)
    at beginWork (http://localhost:6006/static/preview.bundle.js:44320:16)
    at performUnitOfWork (http://localhost:6006/static/preview.bundle.js:47152:16)
    at workLoop (http://localhost:6006/static/preview.bundle.js:47181:26)

在以下情况下我没有收到此错误：

  1. 我使用registerInterfaceWithDefaultTheme类中的函数（但这不允许我设置组件的样式）。（这让我感到惊讶，因为其中的代码registerInterfaceWithDefaultTheme看起来与我所拥有的相同（至少对我而言））

    const aphroditeInterface = require('react-with-styles-interface-aphrodite').default

const registerInterfaceWithDefaultTheme = require('react-dates/lib/utils/registerInterfaceWithDefaultTheme')
.default

registerInterfaceWithDefaultTheme(aphroditeInterface)

  2. 我使用import 'react-dates/initialize';（最终调用registerInterfaceWithDefaultTheme）。

在以下情况下我仍然会收到此错误：

  1. 我交换了注册主题和界面的顺序
  2. ThemedStyleSheet我在文件顶部添加代码src/index，而不是在与使用的文件相同的文件中DayPickerRangeController（这是https://stackoverflow.com/a/48558841/1176156中的建议修复）
  3. 我将来自https://github.com/airbnb/react-dates#interfaces的确切代码放入 Javascript 中，然后将其导入我正在使用的 Typescript 文件中DayPickerRangeController。

我已经在调试器中确认我所有的导入都得到了有效的代码，而不是例如undefined.

4

1 回答 1

0

如果您使用多个 AirBnB 组件（通常的嫌疑人包括 react-dates 和变阻器），这通常会发生，因为他们都建议（在我看来）在他们的文档中对样式进行稍微笨拙的解决方案。

我敢肯定，如果您在代码库中进行搜索，ThemedStyleSheet您会发现这不是您使用它的唯一地方。还要注意各种 AirBnB 组件的“初始化”调用，如果在您的代码之后运行，它们将覆盖您的主题和提供程序并造成进一步的麻烦。我说那是hacky...

您必须将整个代码库ThemedStyleSheet中的所有相关逻辑提升到最顶层，在加载其他任何内容之前，只需使用组合的相关主题调用它一次。（请参阅此 github 问题：https ://github.com/airbnb/rheostat/issues/179 ）

于 2020-07-31T12:35:21.143 回答