javascript - 如何将 state 中定义的数组中的值传递给显示组件的组件？

Question

所以我是 React 新手，正在尝试编写 Todo 列表。

正如您将在以下代码片段中看到的，我在 App.js 中定义了示例待办事项的数组。我在 App.js 中调用了 TodoList 组件，并将 array 传递给它。在 TodoList 中，我想为列表中的所有元素生成一个具有动态值标题的待办事项。我确实获得了页面上的标题，但通过 Todolist。我如何将该值传递给单个 Todo，这是否有意义？

App.js

class App extends Component {

  state = {
    todos: [
      {
        id: uuid.v4(),
        title: 'Title',
        isCompleted: false
      },
      {
        id: uuid.v4(),
        title: 'Title 2',
        isCompleted: false
      },
      {
        id: uuid.v4(),
        title: 'Title 3',
        isCompleted: false
      }
    ]
  }

    render() {
        return (
      <div className="App">
        <LayoutEntry />
        <AddTodo />
        <TodoList todos={this.state.todos} />
      </div>
     );
    }
}
export default App;

TodoList.js

class TodoList extends Component {
    render() {
        return this.props.todos.map((todo) => (
          <div>
            <h3>{ todo.title += " Test" }</h3> 
            <Todo />
          </div>
        ));
    }
}
export default TodoList;

Todo.js

class Todo extends Component {
    render() {
        return (
      <div>
        <input id="buttonDelete" type="button" value="Delete"></input>
      </div>   
      )
    }
}
export default Todo;

Answer 1

只需将其作为 map 中的 Prop 传递即可:

<Todo item={todo} key={todo.id} />

然后在你的 Todo 组件中，你可以抓取数据:

<div>
    <div>Title: {this.props.item.title}</div>
</div>

编辑:添加了 Richard Fazzi 指出的 key 。