React Native 和 JSON 文件解析答案

【问题标题】：React Native and JSON file parsingReact Native 和 JSON 文件解析
【发布时间】：2017-12-18 21:41:09
【问题描述】：

我有一些这样的卡片类：

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

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

访问一个单词

{rowData.word}

我不确定如何“遍历”json 文件中的每个单词并从中创建一张卡片。有人可以帮忙吗？谢谢。

【问题讨论】：

标签： android ios json reactjs mobile

【解决方案1】：

导入您的 json 文件，然后使用 json.stringify 在父组件中设置状态。然后使用 .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

【讨论】：

谢谢！我需要在 Card 类中设置一个“单词”组件，对吧？你能解释一下怎么做吗？
实际上我在想你在最初的帖子中创建的组件将是“word”组件。我作为示例创建的组件将是接收/设置 json 数据的父容器。然后它将遍历该数据并为您的数据中的单词数组中的每个单词创建一个“单词”组件（您创建的组件）。
我将对我最初的帖子进行编辑，向您展示如何重组组件以接收来自父组件的单词 prop。