reactjs - 如何以编程方式创建 react 组件的实例？

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); 显示如下内容: the function representation of the React component或者函数 DateCell() ....

我不确定我是否只是在使用 wrong syntax在分配 cellContent 时，或者我是否应该与工厂一起做某事时。我应该怎么做？

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