React 用 JSON 替换 App 组件状态数据答案

【问题标题】：React replace App component State Data with JSONReact 用 JSON 替换 App 组件状态数据
【发布时间】：2018-05-24 16:11:47
【问题描述】：

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

【问题讨论】：

您可以将redux添加到您的应用程序并为您的卡片数据创建reducer。这可以被 yiu 想要展示的组件订阅。

标签： json reactjs react-props

【解决方案1】：

我不知道为什么你已经有了App 组件，而你已经有了ProjectCardContainer 组件。只需在上面共享的 sn-p 中导入您导出的数据，并将其设置为状态。（确保您的导入路径正确。）

import CardData from './CardData'

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

【讨论】：