Question

我正在使用TypeScript，React和Mobx状态树。

这是我的商店（index.ts）：

import { types as t } from 'mobx-state-tree'
import { Data } from './Data'
export const State = t
  .model('State', {
    data: t.optional(Data, {}),
  })
  .views(self => ({}))
  .actions(self => ({}))
export type StateType = typeof State.Type
export interface Stateable {
  state?: StateType
}

Data.ts是：

import { types as t } from 'mobx-state-tree'

export const Data = t
  .model('Data', {})
  .views(self => ({
    get data() {
      return []
    },
  }))
  .actions(self => ({}))

这是一个React组件（MyComponent.tsx）：

import * as React from 'react'
// @ts-ignore
import { withParentSize } from '@vx/responsive'
import { inject, observer } from 'mobx-react'
import { Calculus } from '../lib/Calculus'
import { Stateable } from '../state'

interface Props extends Stateable {
  parentWidth?: number
  parentHeight?: number
}
// @ts-ignore
@withParentSize
@inject('state')
export class MyComponent extends React.Component<Props> {
  calculus = new Calculus()
  clickHandler = () => {
    this.calculus.start()
  }
  render() {
    const { parentWidth, parentHeight } = this.props
    return (
        <div onClick={this.clickHandler}>
          Click me!
        </div>
    )
  }
}

这是我的Calculus.ts班：

import { Stateable, StateType } from '../state'
import { inject } from 'mobx-react'
// @inject('state')
export class Calculus {
  start() {
    console.log('start!')
    // HERE I WANT TO CALL data()
  }
  // something ...
}

我希望能够从我发表评论的代码点调用data()方法。我能怎么做？我尝试使用工具和扩展程序，但是它不起作用。

我无法更改代码结构。我该怎么办？

Answer 1

首先。您没有创建商店。

第二个。用 get 编写视图方法时，不能用括号来调用它。看起来像这样的state.data.data，其中第一个data是一个字段，第二个data是您的方法。而且不要这样命名。看起来糟透了

这里是sample

从打字稿类中调用商店中的方法

1 个答案: