Question

我试图将我的超级类变成更小的可重用组件，但是，我坚持传递要映射的道具名称。第一个代码块是我的超级类，我试图将其分解为第二个代码块中所示的较小组件，但是当我尝试在第二个代码块中使用props.categoryName.map时出现错误。我还应该如何处理？

// Sort todos by due date. Completed todos get moved to completed list.
    let today = todos.filter(todo => todo.date === "today" && !todo.complete)
    let completedTodos = todos.filter(todo => todo.complete)

    return (
        <div className="td-app">
            <TodoForm onSubmit={this.addTodo}/>

            {/* <Category categoryName="today"/> */}

            <div className="td-section">
                <div className="td-category">
                    <h2 className="today">Today</h2>
                    
                    <p className="td-count">{todayTodos.length} todos</p>
                </div>
                <div className="td-list">
                        {todayTodos.map(todo => (
                                <Todo 
                                    key={todo.id} 
                                    toggleComplete={() => this.toggleComplete(todo.id)} 
                                    onDelete={() => this.handleDeleteTodo(todo.id)}
                                    todo={todo}
                                />
                        ))}
                </div>
            </div>

我的组件类在这里：

import React from 'react'
import Todo from './Todo'

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

Answer 1

您通过了categoryName作为字符串文字"today"。因为显然不是todos的数组，所以不能在其上调用.map()。如果您还想在Category组件内映射待办事项，则还必须传递待办事项。请注意，您实际上必须将列表作为prop传递，而不是带有包含它的变量名称的字符串：

<Category 
    categoryName="today" 
    todos={today} 
    onComplete={this.toggleComplete} 
    onDelete={this.handleDeleteTodo}
/>

和.map()在您的组件中：

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

React JS传递的道具要映射

1 个答案: