尝试Component代替component. React 需要一个大写的 jsx 标签：

renderCards(Component){
  let cards =  this.props.list.map(function(cardData){
     return <Component data={cardData}/>
   })
  return cards
}

感谢 Damien 的回答，这里是使用 TypeScript 和 React 的相同答案。

而不是这个，即一个没有包装器的简单组件......

export const SiteMapContent: FunctionComponent = () => {
  return (
    <React.Fragment>
      <h1>Site Map</h1>
      <p>This will display the site map.</p>
    </React.Fragment>
  );
}

...您可以将一个组件传递到一个包装器中以在那里呈现，就像这样...

const renderContent: FunctionComponent<FunctionComponent> = (Foo: FunctionComponent) => {
  return (
    <div className="foo">
      <Foo />
    </div>
  )
}

export const SiteMap: FunctionComponent = () => {
  return renderContentOne(SiteMapContent);
}

const SiteMapContent: FunctionComponent = () => {
  return (
    <React.Fragment>
      <h1>Site Map</h1>
      <p>This will display the site map.</p>
    </React.Fragment>
  );
}

同样，参数的名称必须是大写的，例如Foonot foo。

当然，另一种不同的方式是传递一个元素而不是组件，而不是按照 OP 中的要求传递组件（在这种情况下，参数名称不必大写）：

const renderContent: FunctionComponent<ReactElement> = (foo: ReactElement) => {
  return (
    <div className="foo">
      {foo}
    </div>
  )
}

export const SiteMap: FunctionComponent = () => {
  const foo: ReactElement = <SiteMapContent />;
  return renderContentOne(foo);
}

const SiteMapContent: FunctionComponent = () => {
  return (
    <React.Fragment>
      <h1>Site Map</h1>
      <p>This will display the site map.</p>
    </React.Fragment>
  );
}

您可以使用React.createElment(myLowerCasedComponent)- 我正在学习 Javascript 教程并即时移植到 TypeScript。在 TypeScript 中，我让它像这样工作：

    // PrivateRoute.tsx
    type PropType = {
        component: React.ComponentType
    } & RouteProps
    
    // Component that wraps another component to produce a
    // component which only renders if the user is logged in. If not logged
    // in then the browser is redirected to the signin component.
    const PrivateRoute: React.FC<PropType> = ({ component, ...rest }) => {
        return (
            <Route
                {...rest}
                render={(props) =>
                    isAuth() ? (
                        React.createElement(component)
                    ) : (
                        <Redirect
                            to={{
                                pathname: '/signin',
                                state: { from: props.location }
                            }}
                        />
                    )
                }
            ></Route>
        )
    }
    
    export default PrivateRoute

这意味着我可以像这样调用我的包装器：

    class Routes extends React.Component {
        render(): React.ReactElement {
            return (
                <BrowserRouter>
                    <Switch>
                        <Route path="/signin" exact component={Signin} />
                        <Route path="/auth/activate/:token" exact component={Activate} />
                        <AdminRoute path="/admin" exact component={Admin} />
                        { /* here my param name is 'component' matching than
                             the other routes. Not 'Component=Private' (ugh) */ }
                        <PrivateRoute path="/private" exact component={Private} />
                    </Switch>
                </BrowserRouter>
            )
        }
    }
    
    export default Routes

这里我的Private组件是一个标准的基于 React 类的组件：

}

type ChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => void

class Private extends React.Component<PropType, StateType> {
    render(): JSX.Element {
        return (
            <Layout>
                <div className="col-md-6 offset-md-3">
                { /* stuff here... */ }
                </div>
            </Layout>
        )
    }
}