用于动态创建组件的 React v4 路由

Question

我有一个用于创建 ReportCard 组件的对象列表。当用户单击其中一个 ReportCard 时，我希望它路由到 ReportDetail 组件，获取通过 URL 参数传递的 ReportCard 的 ID 属性。问题是 ReportDetail 组件接收的 Match.Params 对象返回为 params: {id: ":id"}。我认为我创建这些组件的方式是导致问题的原因。

我尝试更改 ReportCard 组件的生成方式。通过更改 where 和标签的级别。

1. 报表区域组件根据报表对象的数量创建报表卡组件。
2. 每个 ReportCard 组件都有一个链接标签。
3. 所有 ReportCard 组件都有 1 个 Route 标记。
4. 我想将 ReportCard 中的 report.id 传递到 ReportDetail 的 Route URL 参数中。

感谢任何帮助，抱歉所有代码。

报告列表：

    export const reports = [
        {
          id: 1,
          name: "Report 1",
          company: "Company, Inc",
          description: "Charts"
        },
        {
          id: 2,
          name: "Report 2",
          company: "Company, Inc",
          description: "Charts 2"
        },
        {
          id: 3,
          name: "Report 3",
          company: "Company, Inc",
          description: "Charts 3"
        },
        {
          id: 4,
          name: "Report 4",
          company: "Company, Inc",
          description: "Charts 4"
        },
        {
          id: 5,
          name: "Report 5",
          company: "Company, Inc",
          description: "Charts 5"
        },
        {
          id: 6,
          name: "Report 6",
          company: "Company, Inc",
          description: "Charts 6"
        },

     ]

报告区：

 interface DetailParams {
     id: string;
 }

 interface DetailsProps {
     required: string;
     match ? : match <DetailParams> ;
 }

 export interface IAppState {
     reports: any[];
 }

 export default class ReportArea extends React.Component <DetailsProps,
     IAppState> {
     constructor(props: DetailsProps & IAppState) {
         super(props);
         this.state = reports;
     }

     public render() {

         var groupSize = 2;
         var rows = this.state.reports.map(function(report) {
             return <Link to = "/reports/:id"><ReportCard md={3}
             key = {report.id}><ReportCard></Link > ;

         }).reduce(function(row, element, index) {

             index % groupSize === 0 && row.push([]);
             row[row.length - 1].push(element);
             return row;

         }, []).map(function(rowContent, index) {

             return <Row key = {index}> {rowContent}</Row>;
         });

         return <div className = "windowlayout"> {
                 rows}<Route path = '/reports/:id'
         component = {ReportDetail}/> </div>;
     }
 }

报告卡组件：

  export default class ReportCard extends React.Component<DetailsProps, 
    any> {
    props: any;
    constructor(props: DetailsProps) {
    super(props);
    }
  public render() {
      const match = this.props.match
      return (
      <div>
      <Card className="subPanel" key={this.props.id}>
        <CardImg className="imagesec" src="https://via.placeholder.com/150" 
         alt="Card image cap" />
      </Card>
      </div>     
        );
       }
     }

报告详细信息组件：

 interface DetailParams {
    id: string;
  }

  interface DetailsProps {
    required: string;
    match?: match<DetailParams>;
  }

export default class ReportDetail extends React.Component<DetailsProps,any> 
  {
   props: any;

   constructor(props: DetailsProps) {
     super(props);

  }

  public render() {
     const {match} = this.props;
     return (

        <div>
        <h2>
            {match.params.id}
        </h2>
        </div>
         )

         }

        }

Answer 1

问题是<Link to = "/reports/:id">。 Route 需要这种语法，但对于链接，您应该有实际的 id。比如：

const path = "/reports/" + report.id;
return <Link to = {path}>...