ReactJS 将自定义组件传递给网格

Question

我正在创建一个 grid(data table) 组件。它是这样工作的：

const gridOptions = {
    columnDefinitions: [
        {title: 'Test1', component: <ExampleColumnComponent />},
        {title: 'Test2', component: <Example2ColumnComponent />},
    ]
}

<Grid options = {gridOptions} />

内部网格组件：

records.map((row) => (
    <TableRow key={row.id}>
    {
        props.options.columnDefinitions.map((column, index) => {
        return (
            <TableCell key={index} >
                {column.component}
            </TableCell>);
        })
    </TableRow>))

在 Grid 组件内部，我有渲染组件的地图，如果我不将任何道具传递给子组件，它就可以工作。

export const ExampleColumnComponent = () =>{
    return (<div>TEST lalalalala</div>);
}

但是当我在这里使用道具时它不起作用:

export const ExampleColumnComponent = (props) =>{
    return (<div>{props.row}</div>);
}

我在运行时遇到了很多反应错误，例如：

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: . Did you accidentally export a JSX literal instead of a component

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

我不知道如何将此行对象传递给 Grid 组件内的子组件并使其工作？

Answer 1

您可能需要使用 createElement，例如：

import {createElement} from 'react'

//...

records.map((row) => (
    <TableRow key={row.id}>
    {
        props.options.columnDefinitions.map((column, index) => {
        return (
            <TableCell key={index} >
                {createElement(column.component, props)}
            </TableCell>);
        })
    </TableRow>))

ReactJS 将自定义组件传递给网格

ReactJS passing custom components to a grid

components

reactjs