在反应初始化方面，道具是不确定的.为什么

Question

我正在用react 360创建一个VR应用程序。我正在以该示例为代码，并试图将其适合我的应用程序。但是，我对我的React组件的以下初始化有问题。

我具有以下代码index.js

的以下React-360应用程序

import React from 'react';
import connect from './Store';
import {
  asset,
  AppRegistry,
  StyleSheet,
  Text,
  View,
  VrButton,
} from 'react-360';
import Entity from 'Entity';

const ModelView = props => {
  *********** Problem **************
  Why are my props undefined if I am declaring it in the wrapper?
  **********************************
  return (
    <Entity
      style={{transform: [{scaleX: 1.25}, {scaleY: 1.25}]}}
      source={{obj: asset(`${props.planetName}.obj`), mtl: asset(`${props.planetName}.mtl`)}}
    />
  );
};
const ConnectedModelView = connect(ModelView);
export default ConnectedModelView;
AppRegistry.registerComponent('ModelView', () => ModelView);

从上面的代码中，我对ModelView的道具不应不确定。在初始化时，它应具有earth的值。

Props应该在Store.js中初始化。这是以下代码：

import React from 'react';
const State = {
  planetName: 'earth'
};
const listeners = new Set();
export default function connect(Component) {
  return class Wrapper extends React.Component {
    state = {
      planetName: State.planetName
    };
    _listener = () => {
      this.setState({
        planetName: State.planetName
      });
    };
    componentDidMount() {
      listeners.add(this._listener);
    }
    componentWillUnmount() {
      listeners.delete(this._listener);
    }
    render() {
      return (
        <Component
          {...this.props}
          planetName={this.state.planetName}
        />
      );
    }
  };
}

从Facebook代码中获取页面，我正在做的是通过Store.connect方法初始化模型视图。此方法可在ModelView周围创建一个包装器，其中我通过State.planetName设置了道具。但是，我一直不确定，我不知道为什么。我已经将具有State.planetName的代码的每个部分进行了硬编码，但它仍然是未定义的。道具没有设置为我想要的价值，我不确定为什么。那里有人可以帮助我，为什么会这样吗？我会感谢您的帮助。

Answer 1

看起来您正在呈现ModelView，而不是ConnectedModelView。