Question

我正在尝试在我的课程中创建一个函数，以避免多次编写相同的代码。目前，我有3个书架，并且必须在3个书架标签之间编写相同的代码。我希望能够调用一个函数来使代码看起来更简洁。这是我当前的1个书架上的代码，效果很好：

class BookApp extends React.Component {
    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                **{this.state.allBooks.filter((book) => {
                return book.shelf === 'currentlyReading';
                }).map((b) => {
                return (
                    <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                    />
                )
                })}**
            </Bookshelf>
        </div>
        )
    }   
}

我尝试添加一个功能相同的函数并在{}中调用该函数，但是它不返回我的组件。任何帮助深表感谢！

class BookApp extends React.Component {

    filterBooks(shelf) {
            this.state.allBooks.filter((book) => {
            return book.shelf === shelf;
            }).map((b) => {
            return (
                <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                />
            )
        })
    }

    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                {this.filterBooks('currentlyReading')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Want to Read'}>                    
                {this.filterBooks('wantToRead')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Read'}>                    
                {this.filterBooks('read')}
            </Bookshelf>
        </div>
        )
    }
    
}

Answer 1

请检查我已编辑的代码。只需从filterList函数返回filterBooks集合即可。

class BookApp extends React.Component {

    filterBooks(shelf) {
           let filterList = this.state.allBooks.filter((book) => {
            return book.shelf === shelf;
            }).map((b) => {
            return (
                <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                />
            )
        })
        return filterList;
    }

    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                {this.filterBooks('currentlyReading')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Want to Read'}>                    
                {this.filterBooks('wantToRead')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Read'}>                    
                {this.filterBooks('read')}
            </Bookshelf>
        </div>
        )
    }
    
}

Answer 2

只需在“ this.state.allBooks”之前添加一个返回值，但是当您编写react和React中的组件背后的想法时，最好在书架组件内部移动此逻辑。

class BookApp extends React.Component {

    filterBooks(shelf) {
            return this.state.allBooks.filter((book) => {
            return book.shelf === shelf;
            }).map((b) => {
            return (
                <Book
                    key={b.id}
                    currentShelf={b.shelf}
                    clicked={(event) => {this.moveHandler(event, b.id)}}
                    bookTitle={b.title}
                    bookAuthor={b.authors}
                    backgroundImage={`url(${b.imageLinks.thumbnail})`}
                />
            )
        })
    }

    render() {
        return (
        <div>
            <Bookshelf shelfTitle={'Currently Reading'}>                    
                {this.filterBooks('currentlyReading')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Want to Read'}>                    
                {this.filterBooks('wantToRead')}
            </Bookshelf>
            <Bookshelf shelfTitle={'Read'}>                    
                {this.filterBooks('read')}
            </Bookshelf>
        </div>
        )
    }
    
}

React返回内部调用函数以插入组件

2 个答案: