錯誤：元素類型無效：應為字符串（對於內置組件）或類/函數（對於復合組件）但得到：對象

Question

import React from 'react'

const Newslist=(props)=>{  
    const Items = props.news.map((item)=>{
    return (<h2>{item.title}</h2> )
    });
    return(<div> <Items/> </div>)
}

export default Newslist;

這段代碼沒有在dom中顯示任何內容並顯示錯誤

錯誤：元素類型無效：應為字符串（對於內置組件）或類/函數（對於復合組件）但得到：對象

Answer 1

您將Items渲染為 React 組件而不是 JSX 變量。 正如錯誤所說，React 組件只能從字符串（在 HTML 元素的情況下）、類或函數創建。 當您使用<JSX/>語法渲染某些內容時，它會作為參數傳遞給React.createElement 。 一個 JSX 元素數組（您的map調用返回的內容）不是可接受的參數類型之一，因此您會收到此錯誤。 我認為這應該有效：

import React from 'react'

const Newslist=(props)=>{  
    const items = props.news.map((item)=>{
    return (<h2>{item.title}</h2> )
    });
    return(<div> {items} </div>)
}

export default Newslist;