React - 语法混淆澄清

IT技术 javascript reactjs uppercase
2022-07-23 00:43:25

感谢您帮助我摆脱困境。我对 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;

todoData.js：

const todosData = [{
        id: "1",
        text: "Take out the trash",
        completed: true,
    },
    {
        id: "2",
        text: "Grocery Shopping",
        completed: false,
    },
    {
        id: "3",
        text: "Clean Garage",
        completed: false,
    },
    {
        id: "4",
        text: "Mow Lawn",
        completed: false,
    },
    {
        id: "5",
        text: "Catch up on courses",
        completed: false,
    },
];
export default todosData;

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

参考1

应用程序.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;

错误画面 2

参考2

请询问您是否需要更多信息

2个回答

TodoComponents 不是您导入的组件，您将其设置为 const。试着这样写：

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

您可以在此处阅读更多相关信息：https ://reactjs.org/docs/conditional-rendering.html#element-variables

简短的回答：您的变量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>

本课的重点是在 React 中，除非它是 React 组件（即从前面提到的类之一扩展）或功能组件（返回 JSX 的函数），否则它不是组件，并且不能使用喜欢<CustomComponent/>。

其它你可能感兴趣的问题
上一篇父母重新渲染但它的孩子不会重新渲染的情况是什么？ 下一篇chartjs-plugin-zoom 不适用于我的 React 项目