0

我正在使用 MobX 创建一个 react 360（以前的 reactvr）项目。我在设置 Redux 时非常痛苦，为了简单起见，我选择使用 MobX。我要重新创建的是这个 youtube 视频React VR 演示 2017中介绍的项目。

我对 JS 和 VR 场景相对较新，我正在尝试理解 React，特别是 Redux 和 Mobx 等状态管理库。现在进入代码。在这里，我有以下内容index.js：

import React from 'react';
import { decorate, observable, computed } from "mobx";
import { observer } from 'mobx-react';

import {
  asset,
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton,
} from 'react-360';

import Entity from 'Entity';

export default class PlanetMenu extends React.Component {
  planetName = '';

  get selectedPlanetModel() {
    return this.planetName;
  }

  select(planet) {
    this.planetName = planet;
  }

  render() {
    return (
      <View style={styles.panel}>

        <View>
          <VrButton
            style={styles.buttonStyle}
            onClick={() => this.select('earth')}>
            <Text style={styles.planetName}>Earth</Text>
          </VrButton>

          <VrButton
            style={styles.buttonStyle}
            onClick={() => this.select('saturn')}>
            <Text style={styles.planetName}>Saturn</Text>
          </VrButton>
        </View>

      </View>
    );
  }
};

decorate(PlanetMenu, {
  selectedPlanetModel: computed
})

decorate(PlanetMenu, {
    planetName: observable,
})

export class ModelView extends React.Component {
  render() {
    return (
      <Entity
        style={{transform: [{scaleX: 1.25}, {scaleY: 1.25}]}}
        source={{obj: asset(`${PlanetMenu.selectedPlanetModel}.obj`), mtl: asset(`${PlanetMenu.selectedPlanetModel}.mtl`)}}
      />
    );
  }
};

AppRegistry.registerComponent('PlanetMenu', () => PlanetMenu);
AppRegistry.registerComponent('ModelView', () => ModelView);

我所拥有的基本上是两个按钮，单击它们将动态呈现所选行星的 3D 模型。但是，它没有按预期工作。

在我的ModelView班级中，包含的行${PlanetMenu.selectedPlanetModel}.obj插入为'undefined.obj'. 我想知道这是为什么？planetName变量 in正在更新，PlanetMenu但似乎没有被正确访问。有人可以帮我指出正确的方向。一些帮助将不胜感激。

4

0 回答 0