react初学踩坑记录1

在React中，我们通常使用JSX编写组件，它是JavaScript的语法扩展，允许我们在React组件中编写类似HTML的代码。JSX允许我们在JavaScript中编写声明性代码，而不是命令式代码。

然而，有时候我们可能会遇到一些问题，这些问题可能是由于我们对JSX的理解不够深入，或者是我们在编写React组件时违反了某些规则。下面是一些常见的JSX问题以及解决方案：

1. 使用JSX时忘记加上分号：

   在JavaScript中，每个表达式的结尾都不需要分号，但在JSX中，每个JSX元素都是一个表达式，所以每个JSX元素的结尾都不需要分号。如果在JSX元素后面加上分号，JavaScript会将其解析为两个独立的语句，这可能会导致错误。

// 错误的写法
return (
  <div>Hello, world!</div>;
)
 
// 正确的写法
return (
  <div>Hello, world!</div>
)

2. 在JSX中使用JavaScript表达式时忘记使用大括号：

   在JSX中，如果你想在JSX中嵌入一个JavaScript表达式，你需要将这个表达式放在大括号中。如果你忘记加大括号，JSX将会把这个表达式当做一个字符串来处理，而不是一个表达式。

// 错误的写法
return (
  <div>{'Hello, ' + name + '!'}</div>
)
 
// 正确的写法
return (
  <div>{ 'Hello, ' + name + '!' }</div>
)

3. 在JSX中使用HTML标签时忘记使用React组件：

   在React中，所有的HTML标签都是React组件，所以当你想在JSX中使用HTML标签时，你应该将它们当做React组件来使用，即将它们首字母大写或者从'react'引入。

// 错误的写法
return (
  <div>
    <p>Hello, world!</p>
  </div>
)
 
// 正确的写法
return (
  <div>
    <p>Hello, world!</p>
  </div>
)

4. 在JSX中使用条件语句忘记使用三元表达式：

   在JSX中，你不能使用传统的if-else语句，但你可以使用三元运算符来实现条件渲染。

// 错误的写法
return (
  <div>
    if (condition) {
      <p>Condition is true!</p>
    } else {
      <p>Condition is false!</p>
    }
  </div>
)
 
// 正确的写法
return (
  <div>
    { condition ? <p>Condition is true!</p> : <p>Condition is false!</p> }
  </div>
)

5. 在JSX中忘记闭合标签：

   在HTML中，某些标签可以不闭合，但在JSX中，所有的标签都必须闭合。

// 错误的写法
return (
  <input type="text" />
)
 
// 正确的写法
return (
  <input type="text" />
)

6. 在JSX中使用数组时忘记使用map方法：

   在JavaScript中，数组可以包含任何类型的值，包括字符串、数字、对象等。在JSX中，如果你想渲染一个数组，你