Error: Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: .您是否不小心导出了 JSX 文字而不是组件? 在应用
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;
您的 HOC 不会返回组件(应该是
function
或 Class
),但它会调用传递的组件并返回结果。
应该是
const withHigherOrderComponent = (Component) => {
console.log(Component);
return () => <Component />;
};
你也可以做休闲:
const withHigherOrderComponent = (Component) => () => {
console.log(Component);
return <Component />;
};
语法将取决于是否使用类或函数以及返回内容和 HOC 参数的可读性。