Question

我对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

Answer 1

您的terminate called after throwing an instance of 'std::logic_error' what(): DiagramBuilder::Connect: Mismatched vector sizes while connecting output port continuous_state of System plant (size 4) to input port estimated_state of System drake/systems/controllers/PidController@00005639de6f78d0 (size 2) Aborted (core dumped)组件不是函数，而是变量（数组）。基本上，如果您想添加新的JSX标签，例如TempElStructure，则<TempElStructure>必须是一个函数。

TempElStructure

应更改为

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

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

Answer 2

那是因为组件只能返回一个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>
    );
};

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

2 个答案: