React Native和JSON文件解析

Question

我有一些类似的卡类：

export default class TestCard1 extends React.Component {
     render () {
     return (
   <CardView style={styles.card}>
      <Text style = {styles.word}>
      "word"
      </Text>
  </CardView>
);}} 

这会创建一个抽认卡。我在一个JSON文件中有一个"单词"列表，我想为每个单词创建一个抽认卡。我可以通过

访问一个单词

{rowData.word}

我不确定如何"循环" JSON文件中的每个单词并从中创建一张卡。有人可以帮忙吗？谢谢。

Answer 1

导入您的JSON文件，然后使用JSON.Stringify将setState在父组件中。然后使用.map函数循环遍历每个单词，然后通过道具将其传递到您的卡组件中。

import words from './words.json'
import Card from './TestCard1'
class parentclass extends React.Component{
  state={
    data: []
  }
  componentDidMount = () => {
    const data = json.stringify(words)
    this.setState({ data })
  }
  render(){
    const words = () => {
      this.state.data.map(word => <Card word={word} />)
    }
    return(
      <View>
        {words()}
      </View>
    )
  }
}

您的单词组件可以重组为"纯"组件，并且只能从上面构造的父组件中接收数据。您可以在视图标签中添加样式，以使其看起来更像是卡片。

const Card = ({ word }) => (
   <View>
      <Text>
        {word}
      </Text>
  </View>
)
export default Card