主页 / 问题 / 919673
Accepted
Юрий Королик
Asked:2020-12-14 02:33:13 +0000 UTC2020-12-14 02:33:13 +0000 UTC

ReactJS - 数组及其通过道具修改

  • 772

我不知道如何分类书籍。在父块中，我创建了一个包含所有这些书籍的数组，然后我不明白如何单击按钮（其中有 4 个，每个都以自己的方式修改数组：一个完整​​显示它，第二个按评级排序，第三个按受欢迎程度排序，第四个仅显示免费书籍）在一个子组件中，将此修改后的数组传递给另一个子组件。我是新手，还不知道如何实现它......

javascript

1 个回答

  1. Best Answer

    由于您没有在问题中提供代码，因此答案将基于具有最少代码的建议。所以，假设有一个父组件，其中有一个包含所有书籍的数组（一个平庸而简单的示例allBooks- 所有书籍（原始数组），filteredBooks- 一个过滤的书籍数组，假设整个书籍列表通过支柱）：

    const books = [
  { ID: 1, Name: 'One', Author: 'Remark' },
  { ID: 2, Name: 'Two', Author: 'Burunov' },
  { ID: 3, Name: 'Three', Author: 'Romanov' },              
],

    假设我们有一组书籍，其中描述书籍的对象位于其中，并且该数组通过 prop 传递books给父组件，好吧，或者componentDidMount它是从某个地方加载的，但是很简单，我们将初始化我们的变量父状态：

    class ParrentComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      allBooks: props.books,
      filteredBooks: props.books, // изначально можно пустой массив `[]`
    }

    // some code here...

  }

  // some code here...

}

    假设我们有自己的过滤方法，我们也可以有一本参考书（如果是 Redux 会更方便），这些方法也会在父组件中，例如我会写一些东西：

    showAllBooks() {
  const { allBooks } = this.state;
  this.setState({ filteredBooks: allBooks });
}

filterByName(name) {
  const { allBooks } = this.state;
  const filteredBooks = allBooks.filter(book => book.Name === name)
  this.setState({ filteredBooks });
}

filterByAuthor(author) {
  const { allBooks } = this.state;
  const filteredBooks = allBooks.filter(book => book.Author === author)
  this.setState({ filteredBooks });
}

    我会提请您注意，该方法Array.prototype.filter()会创建一个新数组，其中包含通过传递函数中指定的测试的所有元素，这是一种安全的方法，不会导致状态突变。

    现在让我们继续讨论您的子组件。第一个，据我了解，有带有过滤器的按钮，更准确地说，通过单击按钮，将显示一个或另一个数组。让我们将我们的方法的链接传递给这个子组件。第二个将包含一个带有过滤列表的道具。

    <ChildWithButtons
  showAllBooks={this.showAllBooks}
  filterByName={this.filterByName}
  filterByAuthor={this.filterByAuthor}
/>

<ChildWithFilteredBooks
  filteredBooks={this.state.filteredBooks}
/>

    在这个组件中，我们将附加一个用于单击按钮的处理程序，例如，来自渲染和处理一个按钮的片段（对于其他按钮，类似地）：

    <button onClick={this.filterByName}>Filter by name</button>

    同一个组件将有自己的点击处理程序，并通过道具调用过滤方法。

    filterByName(event) {
  const name = 'One'; // для примера будет такое имя, его можно брать откуда угодно
  this.props.filterByName(name); // вызовем метод фильтрации из пропсы
}

    单击按钮后，将调用 prop 中的方法，过滤数组并更新第二个子组件，该组件使用过滤后的数组，因为它的 prop 将被更新filteredBooks。因此，通过props一个父组件，您可以在其两个子组件之间进行通信。请注意，allBooks我们不会更改原始数组，而是将其用作过滤源。不要忘记构造函数内部的绑定，如果你突然需要this，但你需要它。

    阅读以下内容也很有用：

    • 1

相关问题