React - 语法混淆澄清 [英] React - syntax confusion to clarify

问题描述

感谢您帮助我摆脱困境.我对 REACT 非常陌生，显然在一些基本概念上绊倒了.. 感谢您的帮助.

这是我的 app.js:

从反应"导入反应；从./components/TodoItem"导入 TodoItem；从./components/todosData"导入 todosData；功能应用(){const todoComponents = todosData.map((todo) => (<TodoItem key={todo.id} todo={todo.text}/>));控制台日志(todoComponents)；返回(<div className="todo-list"><todoComponents/>,

)}导出默认应用程序；

tod​​oData.js:

const todosData = [{id:1"，文字:倒垃圾"，完成:真实，},{id:2"，文字:杂货店购物"，完成:假，},{id:3"，文字:清洁车库"，完成:假，},{id:4"，文字:割草"，完成:假，},{id:5"，文字:赶上课程"，完成:假，},];导出默认的 todosData；

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

app.js:

从反应"导入反应；从./components/TodoItem"导入 TodoItem；从./components/todosData"导入 todosData；功能应用(){const TodoComponents = todosData.map((todo) => (<TodoItem key={todo.id} todo={todo.text}/>));控制台日志(TodoComponents)；返回(<div className="todo-list"><TodoComponents/>,

)}导出默认应用程序；

错误屏幕 2

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

解决方案

TodoComponents 不是您导入的组件，您将其设置为常量.试着这样写:

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

)

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

I appreciate your help in getting me out of the mess i get into. I am very new to REACT and obviously tripping on some basic concepts.. Appreciate your kind help.

This is my 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;

Error screen with 'todoComponents' starting with lowercase 't'. Next screen will show errors when using uppercase T instead.

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;

Error screen 2

Kindly ask if you need more info

解决方案

TodoComponents is not a component which you imported, you have it set as a const. Try writing it like this:

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

You can read more about it here: https://reactjs.org/docs/conditional-rendering.html#element-variables

这篇关于React - 语法混淆澄清的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！