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

【问题标题】：React elements from array. Warning: React.createElement: type is invalid反应数组中的元素。警告：React.createElement：类型无效
【发布时间】：2020-12-24 15:06:14
【问题描述】：

我对 React（以及 JS）比较陌生，所以如果这个问题看起来很愚蠢，请原谅。

好的，所以我正在创建一个网站，其中新闻部分将使用 React 从存储在单独的 news.js 文件中的数组生成。但是，我无法在我的主 App.js 文件中正确呈现 News 元素。 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

【问题讨论】：

const newsList ] 括号在哪里？你能验证它的语法是否正确吗？

标签： javascript arrays reactjs react-native

【解决方案1】：

这是因为一个组件只能返回一个 React 元素，所以要么将你的数组包装在 Fragment 中：

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

或全部内联：


const News = () => {
    return (
        <Fragment>
            {newsList.map((el) => (
                <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>
            ))}
        </Fragment>
    );
};

【讨论】：

【解决方案2】：

你的TempElStructure 组件不是一个函数，它是一个变量（数组）。基本上，如果你想添加新的 JSX 标签，比如<TempElStructure>，TempElStructure 必须是一个函数。

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

应该改为

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

在此处检查代码框：https://codesandbox.io/s/nifty-chatelet-lmz45

【讨论】：