JSX 文字和组件有什么区别？ React.jsx：类型无效——需要一个字符串

Question

Error: Warning: React.jsx: 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? at App

const withHigherOrderComponent = (Component) => {
 console.log(Component);
return <Component />;
};

const BaseTodoList = ({ data = [] }) => {
  return (
    <ul>
      {data.map((item) => (
      <div key={Math.random()}>{item}</div>
     ))}
</ul>
 );
};

const TodoList = withHigherOrderComponent(BaseTodoList);

export default TodoList;

Answer 1

your HOC does not return a component ( which should be a function or Class ), but it calls the passed component and returns the result.

It should be

const withHigherOrderComponent = (Component) => {
  console.log(Component);
  return () => <Component />;
};