Javascript React-语法混乱以澄清

我感谢你帮助我摆脱困境。我对反应非常陌生，显然对一些基本概念感到困惑。。谢谢你的帮助

这是我的app.js：

import React from "react";
import TodoItem from "./components/TodoItem";
import todosData from "./components/todosData"

function App() {

  const todoComponents = todosData.map((todo) => (
    <TodoItem  key={todo.id} todo={todo.text} />
  ));
  console.log(todoComponents);

    return(
        <div className="todo-list">
          
            <todoComponents />,
          
        </div>
    )
}
export default App;

“todoComponents”以小写字母“t”开头的错误屏幕。下一个屏幕将显示使用大写T时的错误

app.js：

import React from "react";
import TodoItem from "./components/TodoItem";
import todosData from "./components/todosData"

function App() {

  const TodoComponents = todosData.map((todo) => (
    <TodoItem  key={todo.id} todo={todo.text} />
  ));
    
  console.log(TodoComponents);

    return(
        <div className="todo-list">
          
            <TodoComponents />,
          
        </div>
    )
}
export default App;

从“React”导入React；
从“/components/TodoItem”导入TodoItem；
从“/components/todosData”导入todosData
函数App（）{
常量TodoComponents=todosData.map（（todo）=>(
));
console.log（TodoComponents）；
返回(
,
)
}
导出默认应用程序；

错误屏幕2

---

请询问您是否需要更多信息，TodoComponents不是您导入的组件，您已将其设置为常量。试着这样写：

return(
    <div className="todo-list">
      
        {todoComponents}
      
    </div>
)

返回(
{todoComponents}
)

---

您可以在此处阅读更多信息：

简短回答：您的变量，

todoComponents

是一个组件数组。这并不意味着它是一个JSX组件——它只是一个JSX组件数组

JSX组件要么基于类，扩展

React.Component

或

React.PureComponent

，要么是输出JSX的函数。这两个例子是

class CustomComponent1 extends React.Component {
  render() { return "I am a component"; }
}

function CustomComponent2 () { 
  return "I am a second component";
}

这两个函数都可以在它们自己的文件或其他JSX文件中调用，就像这样

<CustomComponent1/>
<CustomComponent2/>

但是，无法将以下内容作为组件调用

const SomeArray = ['hello','there'];

// Wrong
<SomeArray/>
// Right
<div>{SomeArray}</div>

constsomearray=['hello'，'there']；
//错
//对
{SomeArray}

---

tl；本课的dr是，在React中，除非它是React组件（即从前面提到的一个类扩展而来）或功能组件（返回JSX的函数），否则它不是一个组件，不能像

那样使用

元素后面有一个逗号。不确定这是否是错误的根源，只是指出了这一点。

todoComponents

不是一个组件，而是一个数组。因此，不应将其作为组件调用（

）。相反，只需呈现数组

{todoComponents}

FYI-

React

组件必须以

大写字母开始，并使用两种方法创建
React
组件：
类组件
和
函数组件
。在这种情况下，
todosData
不是组件，因为它没有遵循组件的
React
定义。它是一个
数组
项，因此可能将其放入代码中也会起到作用！另外，欢迎来到Stack社区，朋友！关于这个问题，我想问一个简短的问题：请参阅我的todoItem代码：
const SomeArray = ['hello','there'];

// Wrong
<SomeArray/>
// Right
<div>{SomeArray}</div>