嵌套函数组件

Question

嗨，我是ReactJS平台的学生开发者。我以前在render方法中使用过类组件，但现在我学习了钩子和函数组件对它的重要性，就像每个Reactjs开发人员所知道的那样。我在使用嵌套组件时遇到问题，我面临如下错误：

index.js：1警告：函数作为React子函数无效。如果返回组件而不是从渲染返回组件，可能会发生这种情况。或者你想调用这个函数而不是返回它

你能帮我解决这个问题吗？如何在返回部分有效地使用无状态函数组件？

我的示例嵌套组件代码：

import React, {useContext} from 'react';
import { BookContext } from '../../contexts/BookContext';
import BookDetails from './BookForm';


const BookList = (props) => {
    const {books} = useContext(BookContext);

    const emptyBooks = ()=>{
        return (
            <div className="empty">
                No books to read. Let's read now. You are free!
            </div>
        )
    }


    const notEmptyBooks=()=>{
        return (
            <div className="book-list">
                <ul>

                    {books.map(book=>{
                        return (

                            <BookDetails books={books} key={book.id}></BookDetails>
                        )
                    })}

                </ul>
            </div>
        )
    }

    // it does not work. I think error is here
    return books.length>0?()=>emptyBooks:()=>notEmptyBooks

}

export default BookList;

Answer 1

您返回的是一个函数而不是jsx，因此出现了错误。反应组件应该总是返回jsx。

return books.length > 0 ? emptyBooks() : notEmptyBooks();

这应该能解决你的问题。

Answer 2

您需要调用这些函数。在原始代码中，从技术上讲，您只返回了带有（）的函数定义=

请尝试以下代码段：

return books.length > 0 ? emptyBooks() : notEmptyBooks()

我希望这有帮助！