android - 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 在父组件中设置 State。然后使用 .map 函数循环遍历每个单词并通过 props 将其传递到您的 Card 组件中。

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>
    )
  }
}

您的 Word 组件可以重组为“纯”组件，并且仅从上面构建的父组件接收数据。您可以向 View 标签添加样式，使其看起来更像一张卡片。

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