时间戳

首页 > 解决方案 > 如何将 state 中定义的数组中的值传递给看到组件的组件？

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

问题描述

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

正如您将在以下片段中看到的那样，我array在App.js. 我调用 中的TodoList组件App.js并将其交给array. 在TodoList我想为列表中的大量元素生成一个具有动态值标题的单个 Todo。我确实在页面上获得了标题，但通过Todolist. 我怎样才能将这个值交给单个 Todo，这是否有意义？

应用程序.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;

标签： javascriptreactjs

解决方案

只需将其作为道具传递到您的地图中：

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

然后在您的 Todo 组件中，您可以获取数据：

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

编辑：添加了 Richard Fazzi 指出的密钥。

推荐阅读