Javascript 反应数组中的元素。警告：React.createElement:类型无效

我是一个比较新的反应者（和JS），所以如果这个问题看起来很愚蠢，请原谅

好的，我正在制作一个网站，其中新闻部分将使用React从存储在单独的news.js文件中的数组生成。但是，我无法在主App.js文件中正确呈现新闻元素。console.log显示该对象确实包含所需的信息。但是，我确实在浏览器控制台中遇到以下错误：

警告：React.createElement:类型无效--需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：数组

我不知道这个错误是什么意思。如何将数组更改为函数？为什么要这样做？我想将数组元素渲染到DOM结构中

我希望问题已经很清楚了

import React, { Component } from "react";


const newsList = [
    {
      title: "Title",
      id: 2,
      avatarLink: `/res/fandom.png`,
      avatarAlt: `fandom`,
      content: `content`,
      buttomText: "GO TO VIDEO",
      buttonLink: `https://www.youtube.com/something something`
    },
    {
      title: "Title",
      id: 2,
      avatarLink: `/res/fandom.png`,
      avatarAlt: `fandom`,
      content: `content`,
      buttomText: "GO TO VIDEO",
      buttonLink: `https://www.youtube.com/something something`
    },
  
  
  const TempElStructure = newsList.map(function (el) {
    return (
    <div class="news_article">
    <h3>{el.title}</h3>
    <div class="article_wrapper" id={el.id}>
      <img
        src={el.avatarLink}
        alt={el.avatarAlt}
        width="450"
        height="400"
      />
  
      <p>
        {el.content}
        <br />
        <a class="button" target="_blank" rel="noopener noreferrer" href={el.buttonLink}>{el.buttomText}</a>
      </p>
    </div>
  </div>)
  });

  console.log(TempElStructure);

  const News = () => {
    return <TempElStructure/>;
}

export default News

import React，{Component}来自“React”；
常量新闻列表=[
{
标题：“标题”，
id:2，
头像链接：`/res/fandom.png`，
阿凡达尔特：`粉丝'，
content:`content`，
按钮文字：“转到视频”，
按钮链接：`https://www.youtube.com/something 某物`
},
{
标题：“标题”，
id:2，
头像链接：`/res/fandom.png`，
阿凡达尔特：`粉丝'，
content:`content`，
按钮文字：“转到视频”，
按钮链接：`https://www.youtube.com/something 某物`
},
const TempElStructure=newsList.map（函数（el）{
返回(
{el.title}

{el.content}



)
});
console.log（TempElStructure）；
康斯特新闻=（）=>{
返回；
}
导出默认新闻

这是因为组件只能返回单个React元素，所以可以将数组包装成

片段

：

const News=（）=>{
返回(
);
};

或者全部以内联方式完成：

康斯特新闻=（）=>{
返回(
{newsList.map（（el）=>(
{el.title}

{el.content}



))}
);
};
您的
TempElStructure
组件不是一个函数，而是一个变量（数组）。基本上，如果您想添加新的JSX标记，如
，
TempElStructure
必须是一个函数

const TempElStructure = newsList.map(function (el) {})

应改为

const TempElStructure = (props) => newsList.map(function (el) {})

检查此处的代码沙盒：
const newsList
括号在哪里？你能验证它的语法是否正确吗？