Question

我正在尝试通过prop将material-ui图标插入到我的组件中。请让我知道我在做什么错。但是，我不确定如何在JSX中向下传递图标，这是我无法使用的尝试：

此代码段是我试图将图标作为道具传递给Category组件的：

numbers[4]

组件类：

undefined

Answer 1

将图标（而不是字符串）作为组件传递，因为materai-ui图标是现成的图标组件：

import InboxOutlinedIcon from 'materai-ui/...';    

<Category icon={<InboxOutlinedIcon />} .../>

在Category组件中的用法如下：

const Category = ({ title, icon, categoryName, todos, toggleComplete, handleDeleteTodo }) => (
<div className="td-section">
    <div className="td-category">
        {icon}
        <div>{icon}</div>
        <h2 className={categoryName}>{title}</h2>
        
        <p className="td-count">{todos.length} todos</p>
    </div>
    <div className="td-list">
            {todos.map(todo => (
                    <Todo 
                        key={todo.id} 
                        toggleComplete={() => toggleComplete(todo.id)} 
                        onDelete={() => handleDeleteTodo(todo.id)}
                        todo={todo}
                    />
            ))}
    </div>
</div>
)
export default Category

材质用户界面-通过图标作为道具

1 个答案: