访问通过React Native组件中的props传递的对象

问题描述 投票:0回答:1

我对ReactNative很新,在我的javascript上也不是很好,所以请原谅我,如果这是愚蠢的(我已经搜遍了谷歌和stackoverflow,似乎无法找到我的问题的直接答案):

我有一个我定义的简单组件:

export default class SPlanet extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    const planet = this.props ? this.props.planet : null;
    console.log(planet);

    return (
      <View>
        <Text>{this.props.planet}</Text>
      </View>
    );
  }
}

它在app.js中调用如:

<SPlanet planet={planetDB.Atraxia}/>

并且该对象定义如下:

const planetDB = {
  Atraxia : {
    type : "gas",
    name : "Atraxia",
    economy : 10,
    resources : 3,
    loyalty : "70%",
    side : "enemy"
  },
}

现在这基本上可以工作(它不会抛出任何错误)。它只是将对象传递给控制台日志,但不会在文本中显示任何内容。

但是,如果我只想显示名称呢?我试过了

  console.log(planet.name);

但抛出一个错误:“undefined不是一个对象”

我也尝试将它作为一个简单的数组发送并调用它

  console.log(planet[0]);

但我得到了同样的错误。

我确信这是一个愚蠢的错误,我错过了一些基本的语言,但我很难过。救命?

javascript reactjs react-native jsx
1个回答
0
投票

在玩完它之后,我发现了这个:

const planetDB = {
  "Atraxia" : {
    type : "gas",
    name : "Atraxia",
    economy : 10,
    resources : 3,
    loyalty : "70%",
    side : "enemy"
  },
}

通过在行星名称周围添加引号,突然现在它起作用了。我不知道为什么。如果somone可以向我解释原因,我会将它们标记为答案。

© www.soinside.com 2019 - 2024. All rights reserved.