• 简体中文

      • Home > @lynx-js/react > Lynx > registerDataProcessors

      Lynx.registerDataProcessors property

      Register DataProcessors. You MUST call this before root.render().

      Signature:

      registerDataProcessors: (dataProcessorDefinition?: DataProcessorDefinition) => void;

      Example 1

      You MUST call lynx.registerDataProcessors before calling root.render().

      import { root } from "@lynx-js/react"

// You MUST call this before `root.render()`
lynx.registerDataProcessors({
  defaultDataProcessor: () => {...} // default DataProcessor
  dataProcessors: {
    getScreenMetricsOverride: () => {...} // named DataProcessor
  }
})

root.render(<App/>);

      Example 2

      If you have a class component with static defaultDataProcessor or static dataProcessors, you can use it to register DataProcessors.

      import { root, Component } from "@lynx-js/react"

class App extends Component {
  static defaultDataProcessor() {
     ...
  }

  static dataProcessors = {
    getScreenMetricsOverride() {
      ...
    }
  }
}

lynx.registerDataProcessors(App); // You can pass `App` because it has the required shape
root.render(<App/>);

      Example 3

      For developers who want fully typed defaultDataProcessor, they can achieve it by extends interface InitDataRaw and InitData.

      import { root } from "@lynx-js/react"

interface ExistingInterface {
  somePropertyFromExistingInterface: number
}

declare module '@lynx-js/react' {
  interface InitDataRaw extends ExistingInterface {
    someAnotherCustomProperty: string
  }
}

lynx.registerDataProcessors({
  defaultDataProcessor: (initDataRaw) => {
    initDataRaw.somePropertyFromExistingInterface // will be typed
  }
})

      Example 4

      For developers who want fully typed defaultDataProcessor, they can achieve it by extends interface InitDataRaw and InitData.

      import { root, useInitData } from "@lynx-js/react"

interface AnotherExistingInterface {
  someAnotherPropertyFromExistingInterface: number
}

declare module '@lynx-js/react' {
  interface InitData extends AnotherExistingInterface {
    someCustomProperty: string
  }
}

root.registerDataProcessors({
  defaultDataProcessor: () => {
    return {
      someCustomProperty: 'value', // will be typed
      someAnotherPropertyFromExistingInterface: 1, // will be typed
    }
  }
})

function App() {
  const initData = useInitData();

  initData.someCustomProperty // will be typed
  initData.someAnotherPropertyFromExistingInterface // will be typed
}