React 将 App 组件状态数据替换为 JSON

Question

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

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

import CardData from './CardData'

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

React 将 App 组件状态数据替换为 JSON

React replace App component State Data with JSON

json

reactjs

react-props