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

问题描述 投票:0回答:2

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;
reactjs
2个回答
2
投票

您的 HOC 不会返回组件(应该是

function
Class
),但它会调用传递的组件并返回结果。

应该是

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

0
投票

你也可以做休闲:

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

语法将取决于是否使用类或函数以及返回内容和 HOC 参数的可读性。

© www.soinside.com 2019 - 2024. All rights reserved.