javascript - ReactJS: Render dynamic Component and pass props - Stack Overflow

admin管理员组

文章数量:1406308

In a DataGridCell ponent I need to provide ability to point which ponent should be render content of the cell. Also props needs to be passed into this ponent. I tried to do it in the next way (simplified version):

import * as React from 'react';
interface IDataGridCellProps {
    data?: any,
    ponent?: React.Component,
}

export default class DataGridCell extends React.Component<IDataGridCellProps> {
    public render() {
        const Cmp: React.Component<any> = this.propsponent as React.Component;
        return (
            <div>
                <Cmp {...this.props.data} />
            </div>
        )
    }
}

I'm getting next error: TS2604: JSX element type 'Cmp' does not have any construct or call signatures

What is wrong and what is the correct way to render dynamic ponent?

UPD I use then DataGridCell ponent like this:

<DataGridCell key={indexCell}
                data={profile}
                ponent={cellponent}
                />

This is in a loop. cellponent is in the config and looks like this: ponent: Text. Text is our ponent.

UPD 2 So it looks like a problem not in the implementation but in ts-lint and typescript. I cast ponent to type any and it works now. Changed line: const Cmp: any = this.propsponent;

Any more valuable explanation is appreciated.

In a DataGridCell ponent I need to provide ability to point which ponent should be render content of the cell. Also props needs to be passed into this ponent. I tried to do it in the next way (simplified version):

import * as React from 'react';
interface IDataGridCellProps {
    data?: any,
    ponent?: React.Component,
}

export default class DataGridCell extends React.Component<IDataGridCellProps> {
    public render() {
        const Cmp: React.Component<any> = this.props.ponent as React.Component;
        return (
            <div>
                <Cmp {...this.props.data} />
            </div>
        )
    }
}

I'm getting next error: TS2604: JSX element type 'Cmp' does not have any construct or call signatures

What is wrong and what is the correct way to render dynamic ponent?

UPD I use then DataGridCell ponent like this:

<DataGridCell key={indexCell}
                data={profile}
                ponent={cell.ponent}
                />

This is in a loop. cell.ponent is in the config and looks like this: ponent: Text. Text is our ponent.

UPD 2 So it looks like a problem not in the implementation but in ts-lint and typescript. I cast ponent to type any and it works now. Changed line: const Cmp: any = this.props.ponent;

Any more valuable explanation is appreciated.

• javascript
• reactjs
• typescript

Share Improve this question Follow edited Oct 2, 2018 at 10:58 mykhailovskyi asked Oct 2, 2018 at 10:03 mykhailovskyimykhailovskyi 68011 gold badge99 silver badges1919 bronze badges 3

• How are you using DataGridCell? What are you passing in as the ponent prop? – Matt Way Commented Oct 2, 2018 at 10:10
• If this.props.ponent is already a ponent, you just do <div>{this.props.ponent}</div> But if you want to pass props to this, you need to pass a class not a ponent,.. IOW, from the calling side you would do -> <DataGridCell ponent={MyComponent}/> and not <DataGridCell ponent={<MyComponent/>} – Keith Commented Oct 2, 2018 at 10:20
• @MattWay, please have a look at the updated question. – mykhailovskyi Commented Oct 2, 2018 at 10:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

It should be done like this:

interface IDataGridCellProps
{
  data?: any;
  ponent?: React.ComponentType<any>;
}

export default class DataGridCell extends React.Component<IDataGridCellProps> {
  public render()
  {
    const Cmp = this.props.ponent;
    if (Cmp)
    {
      return (
        <div>
          <Cmp {...this.props.data} />
        </div>
      );
    }

    return null;
  }
}

TypeScript now handles properly generics in jsx so it can be:

interface IDataGridCellProps<T>
{
  data?: T;
  ponent?: React.ComponentType<T>;
}

export default class DataGridCell<T> extends React.Component<IDataGridCellProps<T>> {
  public render()
  {
    const Cmp = this.props.ponent;

    if (this.props.data === undefined || Cmp === undefined)
    {
      return null;
    }

    return (
      <div>
        <Cmp {...this.props.data} />
      </div>
    );
  }
}

本文标签： javascriptReactJS Render dynamic Component and pass propsStack Overflow