Question

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

我尝试更改ReportCard组件的生成方式。通过更改位置以及标记的级别。

“报告区域”组件根据报告对象的数量创建ReportCard组件。
每个ReportCard组件都有一个链接标记。
所有ReportCard组件均具有1个Route标签。
我想将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>;
     }
 }

ReportCard组件：

  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>     
        );
       }
     }

ReportDetail组件：

 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}>...

React v4路由动态创建的组件

1 个答案: