Question

我有一个表行组件，它检查是否指定了自定义组件，并且应该以编程方式获取该React组件（column.customComponent）并使用它来呈现数据。但是，我似乎无法实例化组件..我得到的只是数据作为字符串。

这就是我所拥有的：

const cellContent = typeof(column.customComponent === 'undefined') ?
  rowData[column.columnName] :
  {
    type: column.customComponent,
    props: {
      data: rowData[column.columnName],
      rowData
    }
  };

console.log(cellContent); 显示的内容如下： discussion 要么 function DateCell() ....

我不确定在分配cellContent时是否只使用the function representation of the React component，或者我是否应该与工厂做什么或什么。我该怎么做？

Answer 1

我使用此辅助方法创建组件并返回实例。

static async renderComponentAt(componentClass, props, parentElementId){
         let componentId = props.id;
        if(!componentId){
            throw Error('Component has no id property. Please include id:"...xyz..." to component properties.');
        }

        let parentElement = document.getElementById(parentElementId);

        return await new Promise((resolve, reject) => {
            props.ref = (component)=>{
                if(component){
                    resolve(component);
                }                    
            };
            let element = React.createElement(componentClass, props, null);
            ReactDOM.render(element, parentElement);
        });
    }

如何以编程方式创建反应组件的实例？

1 个答案: