嵌套函數組件 ReactJS

Question

嗨，我是 ReactJS 平台的學生開發人員。 我之前在渲染方法中使用了類組件，但現在我正在學習鈎子和函數組件對於它是如此重要，就像每個 Reactjs 開發人員都知道的那樣。 我在使用嵌套組件時遇到問題，我面臨這樣的錯誤：

index.js:1 警告：函數作為 React 子節點無效。 如果您返回 Component 而不是從 render 返回，則可能會發生這種情況。 或者也許你打算調用這個函數而不是返回它

你能幫我解決這個問題嗎？ 如何在返回部分有效地使用無狀態函數組件？

我的示例嵌套組件代碼：

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

您需要調用這些函數。 在您的原始代碼中，您在技術上只是使用() => emptyBooks返回了函數定義。 所以你的假設是正確的錯誤發生在那里。

請嘗試以下代碼片段：

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

我希望這有幫助！

Answer 2

您正在返回一個函數而不是 jsx，因此出現錯誤。 React 組件應該總是返回 jsx。

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

這應該可以解決您的問題。