我有一个表行组件,用于检查是否指定了自定义组件,是否应该以编程方式获取该 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
时,或者我是否应该与工厂一起做某事时。
我应该怎么做?
最佳答案
我使用这个辅助方法来创建组件并返回实例。
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);
});
}
关于reactjs - 如何以编程方式创建 react 组件的实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37604594/