使用JSON

Question

我正在尝试在反应组件中加载Json数据。我有两个组件ProjectCardContainer和ProjectDetailPage，当我点击<h6>链接时，我希望App状态数据显示为文本ProjectDetailPage。然后我才知道React State是本地的，他们不能传递给另一个组件。因此我创建了Json为CardData但现在问题是我如何通过替换或修改{CardData来呈现App 1}}并在ProjectDetailPage中将它们作为文本呈现？

感谢。

Code Gist

CardData.tsx

const CardData = {
  "cards": [
    {
      "projectID": "00001",
      "projectName": "One tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
      "projectLocation": " New York, NY"
    },
    {
      "projectID": "00002",
      "projectName": "Two tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
      "projectLocation": " New York, NY"
    },
    {
      "projectID": "00003",
      "projectName": "Three tent system",
      "profileProjectImage": "https://s3-sa-east-1.amazonaws.com/cdn.br.catarse/uploads/project/uploaded_image/72644/project_thumb_large_capinha.jpg",
      "projectBy": "Crua Outdoors",
      "projectDescrition": "Lightweight Hiking Tent + Insulated Cocoon + Air-Framed Living Space: Use individually or together for the ultimate outdoors experience",
      "projectLocation": " New York, NY"
    }
  ]
}
export default CardData;

Answer 1

当您已拥有App组件时，我不知道您拥有ProjectCardContainer组件的原因。只需导入您在上面共享的代码段中导出的数据，并将其设置为状态。 （确保您的导入路径正确。）

import CardData from './CardData'

class ProjectCardContainer extends React.Component {
  state = CardData;
  render() {
    return <CardList cards={this.state.cards} />;
  }
}