错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象

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;