react-window 元素类型无效:需要一个字符串(对于内置组件)或一个 class/function(对于复合组件)但得到:对象
react-window Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object
我正在使用 react-window
来尝试生成列表。
使用他们使用的默认行,他们创建
const Row = ({ index, style }) => (
<div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
Row {index}
</div>
);
然后他们使用默认元素像这样创建列表
<List
className="List"
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>
返回的也是一个对象,和我的一样构成
我正在尝试做大致相同的事情。
我正在使用列表组件
<List
className="List"
height={150}
itemCount={20}
itemSize={35}
width={300}>
{renderUsers(users)}
</List>
其中 renderUsers(users)
输出 const renderUsers = map((user) => <User user={user} key={user.__id} />);
我收到一条错误消息
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `List`.
返回的是一个看起来像这样的对象(问题?)
我该如何解决这个问题?
您需要将组件作为 List
的子项传递,而不是元素列表。
const Row = ({ data, index, style }) => {
const user = data.users[index];
return (
<div style={style}>
<User user={user} key={user.__id} />
</div>
)
};
和
<List
className="List"
height={150}
itemCount={users.length}
itemSize={35}
itemData={{
users,
}}
width={300}>
{Row}
</List>
我正在使用 react-window
来尝试生成列表。
使用他们使用的默认行,他们创建
const Row = ({ index, style }) => (
<div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
Row {index}
</div>
);
然后他们使用默认元素像这样创建列表
<List
className="List"
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>
返回的也是一个对象,和我的一样构成
我正在尝试做大致相同的事情。
我正在使用列表组件
<List
className="List"
height={150}
itemCount={20}
itemSize={35}
width={300}>
{renderUsers(users)}
</List>
其中 renderUsers(users)
输出 const renderUsers = map((user) => <User user={user} key={user.__id} />);
我收到一条错误消息
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `List`.
返回的是一个看起来像这样的对象(问题?)
我该如何解决这个问题?
您需要将组件作为 List
的子项传递,而不是元素列表。
const Row = ({ data, index, style }) => {
const user = data.users[index];
return (
<div style={style}>
<User user={user} key={user.__id} />
</div>
)
};
和
<List
className="List"
height={150}
itemCount={users.length}
itemSize={35}
itemData={{
users,
}}
width={300}>
{Row}
</List>